滚动时的文本溢出省略号在Chrome和IE中未显示溢出的内容 [英] text-overflow ellipsis when scrolled is not showing overflown content in Chrome and IE

问题描述

我试图弄清楚当文本溢出是省略号，溢出是滚动还是自动时，是否有方法显示溢出内容。

< a href =http://quirksmode.org/css/user-interface/textoverflow.html =nofollow>这里是一个示例链接，您可以在右侧滚动时看到溢出的内容。
但它适用于FireFox。

在此先感谢。 解决方案

我提出了一种在webkit浏览器中通过滚动来模拟文本溢出的方法。

它需要JavaScript。为了方便起见，我使用了jQuery，但是让我知道您是否喜欢使用vanilla JS解决方案。

$ b $ < p 元素需要位于一个容器内，如下所示：

 < div class =ellipsis> 
< p> 
使用< code>省略号< / code>测试段落... 
< / p> 
< / div> 
  

使用这些样式替换您的 300px 首选宽度：

  .ellipsis {
 width：300px; 
 overflow-x：scroll; 
} 
 
 .ellipsis p {
 text-overflow：ellipsis; 
 overflow：hidden; 
 white-space：nowrap; 
} 
  

这会导致滚动条出现在容器上而不是<$ c $首先，我们确定 p 的宽度，以及 元素。像这样存储它：

  $（'。ellipsis p'）。each（function（）{
 $（这个）
 .data（'width'，$（this）.css（'display'，'inline-block'）。width（）+ 10）
 .css（'display'，'' ）; 
}）; 
  

没有 display：inline-block ， p 的宽度与其容器&n;的宽度相同。在这种情况下是300px。 inline-block 允许 p 扩展为全宽。我们在这个宽度上添加10来说明滚动条上的向右箭头。然后我们恢复 p 的默认显示。

我们希望 p 至总是具有该宽度，以便滚动条将移动 p 。但是，将 p 设置为该宽度可省去省略号。

解决方案？将 p 的 width 设置为它的容器宽度，并设置 p 's paddingRight 是 p 的全宽和其容器宽度之间的差异。 / p>



如果容器没有滚动，这很好。为了说明滚动的位置，只需在计算中包括 scrollLeft ：



  $（'。ellipsis'）。scroll（function（）{
 $（this）.find（'p'）。css（{
 paddingRight：$（this）.find（'p' ）.data（'width'） -  $（this）.scrollLeft（） -  $（this）.width（），
 width：$（this）.scrollLeft（）+ $（this）.width（） 
}）; 
}）; 
  





带有例子的代码：

 <$ （）。$（this）.data（'width'，$（this）.css（'display'，'inline-block'）。width（） ）+10）.css（'display'，''）;}）; $（'。ellipsis'）。scroll（function（）{$（this）.find（'p'）。css（{paddingRight：$ （this）.find（'p'）。data（'width'） -  $（this）.scrollLeft（） -  $（this）.width（），width：$（this）.scrollLeft（）+ $（this ）。）;}）; $（'。ellipsis'）。scroll（）;  

 ＃E1 {width：200px;}＃E2 {width：400px;}。ellipsis {overflow-x：scroll; border：1px solid #ddd; margin：2em 0em;}。ellipsis p {text-overflow：ellipsis;溢出：隐藏;白色空间：nowrap; margin：0;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =ellipsisid =E1> < p>使用< code>省略号< / code>测试段落。它需要相当多的文本才能正确地测试< code>文本溢出< / code> ;. < / div>< div class =ellipsisid =E2> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。 < / div>

I'm trying to figure out if there is a way to show the overflown content when the text-overflow is ellipsis and overflow is scroll or auto.

Here's an example link where you can see the overflown content is not shown when scrolled right. But it works on FireFox.

Thanks in advance.

解决方案

I've come up with a method for emulating text-overflow with scroll in webkit browsers.

It requires JavaScript. I'm using jQuery for convenience, but let me know if you prefer a vanilla JS solution.

The p element needs to be within a container, like this:

<div class="ellipsis">
  <p>
    Test paragraph with <code>ellipsis</code>...
  </p>
</div>

Use these styles, substituting 300px for your preferred width:

.ellipsis {
  width: 300px;
  overflow-x: scroll;
}

.ellipsis p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

This causes the scrollbar to appear on the container rather than the p element.

First, we determine the width of the p and store it like this:

$('.ellipsis p').each(function() {
  $(this)
    .data('width', $(this).css('display','inline-block').width()+10)
    .css('display','');
});

Without display:inline-block, the p has the same width as its container – in this case 300px. inline-block allows p to expand to full width. We add 10 to this width to account for the right-arrow on the scrollbar. We then restore p's default display.

We want p to always have that width, so that the scrollbar will move the full extent of p. However, setting p to that width gets rid of the ellipsis.

The solution? Set p's width to be that of its container's width, and set p's paddingRight to be the difference between p's full width and its container's width.

This works well if the container isn't scrolled. To account for the scrolled position, simply include scrollLeft in the calculations:

$('.ellipsis').scroll(function() {
  $(this).find('p').css({
    paddingRight: $(this).find('p').data('width') - $(this).scrollLeft() - $(this).width(),
    width: $(this).scrollLeft() + $(this).width()
  });
});

Code with examples:

$('.ellipsis p').each(function() {
  $(this)
    .data('width', $(this).css('display','inline-block').width()+10)
    .css('display','');
});

$('.ellipsis').scroll(function() {
  $(this).find('p').css({
    paddingRight: $(this).find('p').data('width') - $(this).scrollLeft() - $(this).width(),
    width: $(this).scrollLeft() + $(this).width()
  });
});

$('.ellipsis').scroll();

#E1 {
  width: 200px;
}

#E2 {
  width: 400px;
}

.ellipsis {
  overflow-x: scroll;
  border: 1px solid #ddd;
  margin: 2em 0em;
}

.ellipsis p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ellipsis" id="E1">
  <p>
Test paragraph with <code>ellipsis</code>.  It needs quite a lot of text in order to properly test <code>text-overflow</code>.
  </p>
</div>

<div class="ellipsis" id="E2">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

这篇关于滚动时的文本溢出省略号在Chrome和IE中未显示溢出的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！