1. 單行文本溢出顯示省略號
<div class="ellipsis">
css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號
</div>
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 300px;
color: red
}
2. 多行文本溢出顯示省略號
<div class="ellipsis">
css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號
css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號
</div>
.ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
width: 300px;
color: red
}
查看Demo
注：
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)。為了實現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結(jié)合屬性：
display: -webkit-box：必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型顯示甚亭。
-webkit-box-orient：必須結(jié)合的屬性膊夹，設(shè)置或檢索伸縮盒對象的子元素的排列方式层释。
適用范圍：
7a3902ade9e761c43e485851582fb7c4.png
