css3實現多行文字溢位顯示省略號...
阿新 • • 發佈:2019-02-11
我們常用的就是實現單行文字溢位顯示省略號,此時需要定寬度,程式碼如下:
.box{width:200px;
overflow: hidden;
text-overflow:ellipsis;//文字溢位顯示省略號
white-space: nowrap;//文字不換行}
那如何實現多行文字溢位呢?
第一種:可以使用css3方法
效果如下,真是方便又使用<pre name="code" class="css">.proname { display: -webkit-box; -webkit-line-clamp: 2;//限制文字的行數,只顯示兩行 -webkit-box-orient: vertical; overflow: hidden; }
常用css3小技巧
移除input型別為number在谷歌瀏覽器下自帶的上下箭頭
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}