文本省略效果.png
- 常見的單行省略：
.line-one{
display: block; //關(guān)鍵屬性
height: 22px; //關(guān)鍵屬性
white-space: nowrap; //關(guān)鍵屬性
overflow: hidden; //關(guān)鍵屬性
text-overflow: ellipsis; //關(guān)鍵屬性
border-bottom: 1px dashed #f9f9f9;
margin-bottom: 10px;
padding-bottom: 8px;
}
- 多行省略：
// 都是關(guān)鍵屬性焚鲜，不設(shè)置則顯示不出來省略號
.line-two{
height: 44px; //定高
display: block;
display: -webkit-box; //將對象作為彈性伸縮盒子模型顯示，
-webkit-line-clamp: 2; //設(shè)置顯示的文本的行數(shù)
-webkit-box-orient: vertical; //設(shè)置或檢索伸縮盒對象的子元素的排列方式
overflow: hidden;
text-overflow: ellipsis;
}
源碼：
.ellipsis-demo{
width: 150px;
margin:20px 0;
font-size:14px;
color:#333;
line-height: 22px;
color:#fff;
border:1px solid #f2f2f2;
padding: 10px 0;
}
.line-one{
display: block;
height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px dashed #f9f9f9;
margin-bottom: 10px;
padding-bottom: 8px;
}
.line-two{
height: 44px;
word-break: break-word;
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="ellipsis-demo">
<div class="line-one">這是第一行內(nèi)容败富，很長很長的第一行內(nèi)容</div>
<div class="line-two">這是第2天腕窥，第2天的內(nèi)容母市，很長很長的第一行內(nèi)容夹纫。這是第2天，第2天的內(nèi)容苟径，很長很長的第一行內(nèi)容設(shè)置多行省略</div>
</div>
