<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>前端