是否可以在多行文本上使用text-overflow：省略号？

Question

我有一个p带有特定标记的width和height。我想用来text-overflow:ellipsis获取...标签中的文本是否太长。CSS可以解决多行文字吗？

Answer 1

您可以使用CSS做到这一点。它仅适用于webkit浏览器，但对其他浏览器具有后备功能。

采用 ：

display: -webkit-box;

-webkit-line-clamp: $lines-to-show;

-webkit-box-orient: vertical;

height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */

随着：

max-width: $maxwidth;

overflow: hidden;

text-overflow: ellipsis;

Answer 2

我之所以发布此信息，是因为我认为我的解决方案没有流行的解决方案复杂，该解决方案涉及伪元素和浮点行为。我最近不得不创建一个可以在IE7中使用的解决方案，因此伪元素最初不是一个选择。

该技术涉及4个元素：

确定内容最大高度的块级容器

文本内容的内联包装

内联包装中包含的省略号

内联包装中的一个“填充”元素，当文本内容未超出容器的尺寸时，将省略号闭塞

与以前的仅使用CSS的解决方案一样，该技术要求内容使用纯色背景或固定位置的背景图像：省略号需要使文本的某些部分变得晦涩难懂，而填充则需要使省略号的晦涩难懂之处。您可以执行奇特的渐变效果以使文本淡入省略号，但我将保留该修饰性细节。

HTML结构

<!-- The block level container. `clamped-2` for 2 lines height -->

<p class="clamped clamped-2">

  <!-- The inline wrapper -->

  <span class="text">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

    lobortis nisl ut aliquip ex ea commodo consequat.

    <!-- The ellipsis, which can contain anything you want - 

         (a 'more' link, for example) -->

    <span class="ellipsis">

      &#133;

    </span>

    <!-- The fill, which covers the ellipsis when the text doesn't overflow -->

    <span class="fill"></span>

  </span>

</p>

的CSS

body {

  /* We need a solid background or background-position: fixed */

  background: #fff;

  /* You'll need to know the line height to clamp on line breaks */

  line-height: 1.5;

}

.clamped {

  overflow: hidden;

  position: relative;

}

/* Clamp to 2 lines, ie line-height x 2:

   Obviously any number of these classes can be written as needed

 */

.clamped-2 {

  max-height: 3em;

}

/* The ellipsis is always at the bottom right of the container,

   but when the text doesn't reach the bottom right...

 */

.clamped .ellipsis {

  background: #fff;

  bottom: 0;

  position: absolute;

  right: 0;

}

/* ...It's obscured by the fill, which is positioned at the bottom right 

   of the text, and occupies any remaining space.

 */

.clamped .fill {

  background: #fff; 

  height: 100%;

  position: absolute;

  width: 100%;

}

这是一个小提琴，用于演示它：调整浏览器的宽度或更改文本以查看其从省略号变为无省略号。

除了任意的优雅因素之外，我相信它比流行的解决方案性能更高，因为它不依赖浮点数（需要大量重绘）-绝对定位更容易计算，因为计算时没有相互依赖关系布局。