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中文網其他相關文章!