Question

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

Here's一个示例链接，您可以看到向右滚动时未显示溢出的内容。但它适用于FireFox。

提前致谢。

Answer 1

我已经提出了一种在webkit浏览器中使用滚动模拟文本溢出的方法。

它需要JavaScript。我使用jQuery是为了方便，但如果你更喜欢一个普通的JS解决方案，请告诉我。

p元素必须位于容器中，如下所示：

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

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

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

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

这会导致滚动条显示在容器上而不是p元素上。

首先，我们确定p的宽度并将其存储为：

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

如果没有display:inline-block，p的宽度与其容器相同 - 在本例中为300px。 inline-block允许p扩展到全宽。我们在此宽度上添加10以考虑滚动条上的右箭头。然后，我们会恢复p的默认display。

我们希望p 总是具有该宽度，以便滚动条移动p的完整范围。但是，将p设置为该宽度会删除省略号。

解决方案？将p＆＃39; s width设置为其容器宽度的设置，并将p＆＃39; s paddingRight设置为区别p的全宽及其容器的宽度。

如果容器没有滚动，这很有效。要考虑滚动位置，只需在计算中包含scrollLeft：

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

代码示例：

＆＃13;

$('.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();

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

当滚动未在Chrome和IE中显示溢出内容时，文本溢出省略号

1 个答案:

代码示例：