css實現單行文本和多行文本省略號

單行文本出現省略號的條件:

<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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章