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

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

本教學操作環境：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中文網其他相關文章！