<p>做为前端常常遇到的一个需求。对于一些比较长的文本作限制，不显示，或者显示省略号。今天特地整理了一下，作个备忘。</p> <a href="http://www.jqhtml.com/19451.html" target="_blank">css实现单行、多行文本超出显示省略号</a> <h2>1.超出固定长度显示...</h2> <pre class="brush:js">.class{ width: 400px; overflow: hidden; //这个是设置隐藏的。还有其余的，例如scroll，是超出固定长度，底部显示滚动条的。 text-overflow: ellipsis; //这个就是设置直接隐藏掉文字，仍是显示...的。当前是显示省略号。直接省略是clip display: inline-block; //根据不一样标签display值，有的不用加。 }</pre> <h2>2.超出固定行数显示...</h2> <p>超出固定行数。显示省略号，和上面差很少。overflow和text-overflow见上方解释。</p> <pre class="brush:js">.class{ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; //这里就是设置超出几行隐藏 -webkit-box-orient: vertical; display:-webkit-box; //根据不一样标签display，有的不用加。或者设置成别的属性，本身能够随便试试 }</pre> <h4>巨坑提醒(多行隐藏)</h4> <p>有的时候，你按照上面的设置。就是不生效。或者本地生效了，react（或者vue）打包到服务器上就不生效了。你能够在控制台看看。是否是-webkit-box-orient这个属性消失了。若是是这样的话，请看下面的解决办法。</p> <pre class="brush:js">// 办法1。 直接在style里面写上 display:-webkit-box;就行css
//办法2 .class{ overflow: hidden;
text-overflow: ellipsis; -webkit-line-clamp: 2; /* autoprefixer: off / //对，就是加这两个注释就行。 -webkit-box-orient: vertical; / autoprefixer: on */ display:-webkit-box; } </pre>html
<p>不生效的缘由。我也不清楚，网上说法也不少。这个英文话题，好像对缘由作了 一些探讨，感兴趣的能够去看看。（<a href="https://github.com/postcss/autoprefixer/issues/776" rel="nofollow noreferrer">https://github.com/postcss/au...</a>）</p>前端