css实现字数超过指定行数显示省略号...

问题描述

很多时候都会遇到有字数控制的需求。比如不超过两行就全部显示，超过两行就把多余的字隐藏并显示省略号。利用-webkit-line-clamp属性可以很简单的实现这个需求。

关于-webkit-line-clamp属性

限制在一个块元素显示的文本的行数。
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow 可以用来在多行文本的情况下，设定超出范围的文本的隐藏方式。如text-overflow:ellipsis就是用省略号“...”隐藏超出范围的文本。

如果标签内是英文字符

当标签内是英文字符的时候你就会发现样式失效了。英文是不会自动换行的，所以添加如下属性以兼容英文字符。

word-wrap:break-word;
word-break:break-all;

开发中遇到的小问题：

失踪的代码～～～

我在vue文件中的style区域写了如下的less代码，但是当我启动项目到chrome浏览器查看效果的时候，却发现失踪了一行代码： -webkit-box-orient: vertical;。导致我样式失效...

.linecamp{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  word-wrap:break-word;
  word-break:break-all;
}

解决方案

• 最后找了半天原因，改了好久webpack配置都没有解决问题。后来经大神指点，是因为我这段less代码写在了vue文件里，而项目编译时vue调postcss对less进行处理的时候把这行代码删掉了。
• 我把这段代码抽离到了index.less里面，在vue文件直接引用这个样式类linecamp。代码出现～问题消失～
• 也算是很灵异的一个问题了，长见识～～