在css中,可使用overflow屬性實現多行文字溢位隱藏,只需為文字元素新增「overflow: hidden;」樣式即可。 overflow屬性規定當內容溢出元素框時發生的事情,當值設定為「hidden」時,會設定溢出部分不可見。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中,可使用overflow屬性來實現多行文字溢出隱藏。
overflow屬性規定當內容溢出元素框時發生的事情。
這個屬性定義溢出元素內容區的內容會如何處理。屬性值:
hidden:內容會被修剪,其餘內容是不可見的。
scroll:內容會被修剪,但是瀏覽器會顯示捲軸以便查看其餘的內容。
auto:如果內容被修剪,則瀏覽器會顯示捲軸以便查看其餘的內容。
如果值為 scroll,不論是否需要,使用者代理程式都會提供一個捲動機制。因此,有可能即使元素框中可以放下所有內容也會出現捲軸。
範例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div { background-color: pink; width: 150px; height: 150px; overflow: hidden } </style> </head> <body> <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p> <div> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要, 用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值是 visible。 </div> </body> </html>
效果圖:
#直接隱藏溢出部分不好看,我們可以將溢出部分隱藏並顯示省略號:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS如何使文本溢出部分显示省略号?多行超出</title> <style> *{margin: 0px;padding: 0px;} .box{ width: 280px; height: 62px; margin: 50px auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } </style> </head> <body> <div class="box"> css 实现多行文本超出长度显示省略号,css 实现多行文本超出长度显示省略号, css 实现多行文本超出长度显示省略号 </div> </body> </html>
效果圖:
#這種方法只有-webkit核心才有作用,而行動端瀏覽器絕大部分是WebKit核心的,所以該方法適用於行動端;
-webkit-line-clamp 用來限制在一個區塊元素顯示的文字的行數,這是一個不規範的屬性(unsupported WebKit property),它沒有出現在CSS 規範草案中;
display: -webkit-box 將物件作為彈性伸縮盒子模型顯示;
-webkit-box -orient 設定或檢索伸縮盒物件的子元素的排列方式;
text-overflow: ellipsis 以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字。
(學習影片分享:css影片教學)
以上是css怎麼實現多行文字溢出隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!