是否可以使用文本溢出:多行文本的省略号？

Question

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

Answer 1

谷歌搜索没有透露任何甚至遥远的承诺,所以我会说这是不可能的.

我找到了text-overflow: -o-ellipsis-lastline,但它只适用于Opera:http://people.opera.com/dstorey/text/text-overflow.html(mirror:http://jsbin.com/exugux/)

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

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;

这是小提琴:演示

Answer 3

我发布这个是因为我相信我的解决方案不如流行的解决方案复杂,它涉及伪元素和浮动行为.我最近不得不创建一个可以在IE7中运行的解决方案,因此伪元素首先不是一个选项.

该技术涉及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%;
}

这是一个演示它的小提琴:调整浏览器的宽度或更改文本,看它从省略号转为无省略号.

除了任意的优雅因素外,我相信这比流行的解决方案更具性能,因为它不依赖于浮点数(需要大量重新绘制) - 绝对定位计算起来要简单得多,因为计算时没有相互依赖性布局.

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 + "...";
    }   
}

希望这可以帮助!