單行文本出現省略號的條件:
<style>
p {
width: 200px; /*寬度*/
text-overflow: ellipsis; /*文字以省略號的方式隱藏*/
white-space: nowrap;/*禁止文字內容折行*/
overflow: hidden;/*超出部分溢出隱藏*/
}
</style>
<p>單行文本出現省略號單行文本出現省略號單行文本出現省略號</p>
多行文本出現省略號的條件:
<style>
p {
width:200px;
display: -webkit-box; /* 彈性盒模型*/
-webkit-box-orient: vertical; /* 文字垂直排列 */
-webkit-line-clamp:2; /*文字顯示的行數*/
overflow: hidden; /*超出部分溢出隱藏*/
}
</style>
<p>多行文本出現省略號多行文本出現省略號多行文本出現省略號多行文本出現省略號</p>