編碼的世界 / 優質文選 / 生涯

css3實現多行文本溢出顯示省略號...


2021年12月07日
-   

我們常用的就是實現單行文本溢出顯示省略號,此時需要定寬度,代碼如下:
.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;
}

熱門文章