首頁  >  文章  >  web前端  >  css怎麼實作超出三行則只顯示一行

css怎麼實作超出三行則只顯示一行

藏色散人
藏色散人原創
2023-02-01 09:32:242616瀏覽

css實作超出三行則只顯示一行的方法:1、開啟對應的HTML檔案;2、透過給文字標籤設定css屬性為「.text_singlerow {display:block;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}」實作單行顯示即可。

css怎麼實作超出三行則只顯示一行

本教學操作環境:Windows10系統、CSS3版、DELL G3電腦

css怎麼實作超出三行則只顯示一行?

CSS中多行文字時的行數控制顯示

#有時候要進行多行文字內容只顯示一行,或兩行,或三行,這時候需要在css中進行相關屬性的設置,代碼如下:

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}
 
 
// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block;根据使用情况来定(行内元素需要加这个,块级元素和行内块级可以不用)*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

需要注意的時,假設設置了只顯示兩行,則第二行結尾會以省略號顯示,而第三...N行仍會顯示,如果標籤的高度夠高的話,所以控制行數的顯示,除了設定css樣式外,還需要結合標籤的高度設定。

推薦學習:《css影片教學

以上是css怎麼實作超出三行則只顯示一行的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn