关于文字单行显示省略号和多行省略号的写法

最新推荐文章于 2022-06-04 23:51:55 发布

weixin_30516243

最新推荐文章于 2022-06-04 23:51:55 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dreamelapse/p/5371833.html

本文介绍了如何使用CSS的text-overflow属性来处理文本溢出，包括单行和多行文字显示省略号的方法。对于单行文字，可以通过设置white-space:nowrap; 和 text-overflow:ellipsis; 实现。而对于多行文字，则可通过-webkit-line-clamp属性配合其他CSS属性实现。

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

单行文字显示省略号条件：

text-overflow的起作用环境是在一个‘block’状态下的父元素容器里，它的inline子元素上水平方向不能换行（即white-space: nowrap;），这种情况下用text-overflow:ellipsis属性，即可将单行文字超出规定宽度显示省略号。

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden;  
  text-overflow: ellipsis;
}

text-overflow还有另一个值，就是clip，这个值作用是切断超出的文字不显示，就不做过多解释了。

当然，单行文字显示省略号很简单，可是要实现多行文字显示省略号，不能自己手动加省略号，太自欺欺人了。那么要怎么实现呢。

方法：

用Webkit引擎里提供了一个控制多行文本超出溢出控制显示CSS属性：-webkit-line-clamp: n;

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

在别的内核浏览器下想实现此功能写法：

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

转载于:https://www.cnblogs.com/dreamelapse/p/5371833.html