使用text-overflow截断超长文字显示技巧

CSS里的text-overflow属性能用来控制超长溢出的文字内容的显示方式，超出的文字可以是直接截断、用省略号表示，或用自定义的字符替代。

text-overflow的起作用环境是在一个‘block’状态下的父元素容器里，它的inline子元素上水平方向不能换行(因为 ‘white-space: nowrap’)的情况下。要想text-overflow起作用，我们还不行能让‘overflow’的值为visible，因为我们的目的就是不想让超出的部分直接显示出来。

text-overflow不仅能控制文本尾部超出部分的显示方式，还可以控制文本开头超出部分的显示方式,比如：

/* Overflow behavior at left end | at right end
   Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: "…" "…";

text-overflow的几个有效值:

clip: 超出的部分直接截断
ellipsis: 超出的部分用省略号表示
自定义字符: 超出的部分用自定义字符表示

text-overflow用法样例

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden;              /* "overflow" value must be different from "visible" */ 

  text-overflow: ellipsis;
}

实例演示

多行文本的超长截断问题

上面介绍的text-overflow，我们只能用在单行文本的超长溢出情况，当文本换行成多行时，它就不起作用了，但实际编程中，我们经常会遇到多行文本的超长溢出控制问题。比如，空间只能显示三行，希望在第三行结尾处超出的部分用省略号表示，怎么解决？

如果你使用的是最新版的谷歌浏览器，那这个问题相对容易解决，因为Webkit引擎里提供了一个控制多行文本超出溢出控制显示CSS属性：-webkit-line-clamp: N;：

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* 控制显示的行数 */
   line-height: X;        /* 对不支持浏览器的 */
   max-height: X*N;       /* 对不支持浏览器的弥补 */
}

-webkit-line-clamp实例演示

注意：你需要使用最新版的谷歌浏览器。

如果你需要在火狐浏览器上也有要求，那只能使用上面代码里的弥补方法，就是限定限制文字父元素的高度为行高的整数倍，然后超出的部分直接截断处理：

.max-lines {
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

其中 max-height: = line-height: × <行数>.

阅读余下内容

标签：