多行文本能否使用text-overflow:ellipsis?

Question

我有一个具有特定宽度和高度的<p>标签。

我想使用text-overflow:ellipsis来得到...，如果标签中的文本太长。

这个问题能否用CSS解决多行文本？

- Johan

---

值得一提的是，text-overflow:ellipsis在火狐浏览器中目前还不能正常工作（据说计划在发布FF7时解决）。 - Spudley

这个回答解决了你的问题吗？在第二行使用CSS省略号 - Penny Liu

Answer 1

通过谷歌搜索，没有找到任何有前途的信息，因此我认为这是不可能的。

我确实发现了text-overflow: -o-ellipsis-lastline，但它只在Opera浏览器中有效：http://people.opera.com/dstorey/text/text-overflow.html （镜像：http://jsbin.com/exugux/）

还有一个类似的基于WebKit的解决方案：http://dropshado.ws/post/1015351370/webkit-line-clamp

- thirtydot

---

我相信这是正确的。我所阅读的所有内容都表明需要使用nowrap。 - Richard H

我刚刚添加了一个答案，其中链接到一个帖子，其中有人实现了一种可行的仅使用CSS的解决方案。它不是完美的，但我认为它还算合理。 - Kaleb Pederson

Answer 2

你可以使用 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;

这里是代码演示：演示链接

- Harish Ambady

---

在最新的Firefox浏览器中无法正常工作，文本被修剪但省略号不可见。 - coding_idiot

不幸的是，在IE11和Edge上与FF相同的行为，文本被修剪但没有省略号。 - Raj Parmar

@RajParmar 请注意，我在我的答案中提到省略号只适用于Webkit浏览器。 - Harish Ambady

@HarishAnchu 是的，我承认。我只是为了其他遇到这个问题的人提到它。你的答案是正确的。 - Raj Parmar

Answer 3

我发表这篇文章是因为我认为我的解决方案比流行的解决方案少了复杂的伪元素和浮动行为。最近我不得不创建一个适用于IE7的解决方案，所以首先伪元素并不是一个选项。

该技术涉及四个元素:

1. 一个块级容器，确定内容的最大高度 2. 一个文本内容的内联包装器 3. 内联包装器中的省略号 4. 当文本内容未超出容器的尺寸时，'fill'元素也在内联包装器中，遮盖省略号

与以前的仅使用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%;
}

这里有一个演示用的小工具：改变浏览器窗口大小或更改文本，可看到它从省略号转换为不省略号。

除了任意优雅的因素外，我认为这种方法比流行的解决方案更高效，因为它不依赖于浮动（需要大量重绘） - 绝对定位要简单得多，因为在计算布局时没有相互依赖。

- Barney

---

我相信这更高效。你有具体数据吗？比起原来更高效多少？ - David Miller

唉，信仰预设了确定性的缺失！你可以使用Chrome Dev Tools进行绘画时间比较，但我怀疑有更简单的方法来生成数字。 - Barney

将 display: block 添加到 .clamped .fill 中可以解决一个问题，即如果只有一行内容，则会将填充推得太远，以至于尽管没有溢出，但 .ellipsis 仍然被揭示。添加 display block 强制 .fill 在内容下方。 - Scott Rickman

我觉得这不是一个很好的解决方案，因为你受限于背景颜色，如果有不同的背景颜色，就不太好了 :( - msqar

@msqar，您也可以使用固定（无大小）的背景图像（请参见demo），但是是的 - 这是一种限制。其他任何东西都需要JavaScript。这取决于您对“干净”的定义 :) - Barney

这里有一个边缘情况，就在溢出点，只有省略号的一部分显示出来了。有没有办法修复？ - Jason S

Answer 4

我写了一个Javascript函数来解决多行省略号问题。

function ellipsizeTextBox(id) {

    var el = document.getElementById(id);
    var keep = el.innerHTML;
    while(el.scrollHeight > el.offsetHeight) {
        el.innerHTML = keep;
        el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1);
        keep = el.innerHTML;
        el.innerHTML = el.innerHTML + "...";
    }   
}

希望这能有所帮助！

- user1152475

Answer 5

我找到了一个多行跨浏览器纯CSS省略解决方案。我尝试了很多解决方案，只有这个使用CSS的方法起作用。我有一个动态宽度的div，并且必须设置高度。

以下是链接：http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

- Wladimir Gramacho

Answer 6

修改了用户1152475的函数，使其按单词（以空格分隔）而非按字符处理。

function ellipsizeTextBox(id) {
    var el = document.getElementById(id);
    var wordArray = el.innerHTML.split(' ');
    while(el.scrollHeight > el.offsetHeight) {
        wordArray.pop();
        el.innerHTML = wordArray.join(' ')  + '...';
    }   
}

请注意，对于这两种解决方案，盒子必须具有固定的高度。

- LocalPCGuy

Answer 7

HTML没有提供这样的功能，这非常令人沮丧。

这就是为什么我开发了一个小型库来处理这个问题。该库提供了用于建模和执行字级文本呈现的对象。这应该正好满足您的需求：

阅读更多内容，请访问http://www.samuelrossille.com/home/jstext获取截图、教程和下载链接。

- Samuel Rossille

---

看起来很有帮助。您网站上的实时演示将非常有用。此外，在IE9中测试jstext-examples.html并调整大小会产生这种情况，显然有点破碎：http://i.stack.imgur.com/aoA1i.png - thirtydot

@thirtydot 谢谢您的反馈。已修复该问题并增加了实时演示！ - Samuel Rossille

Answer 8

正如之前所指出的，有一种奇怪的方法可以通过David DeSandro发布的webkit-box来实现：

  elements_to_style {
      display: -webkit-box;
      overflow : hidden;
      text-overflow: ellipsis
      -webkit-line-clamp: number_of_lines_you_want;
      -webkit-box-orient: vertical;
  }

链接 http://dropshado.ws/post/1015351370/webkit-line-clamp

- Tamo Maes

Answer 9

嘿，你可以使用CSS这种方式来实现。

适用于Chrome和Safari浏览器

.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

适用于Firefox和Internet Explorer浏览器

* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

- Dr. Piyush Dholariya

Answer 10

我已经尝试了大部分的解决方案，你最好使用可靠的clamp.js插件。它可以在所有环境中运行，并且被压缩后只有3K的体积。

- serraosays