css限定文字行數,超出範圍的文字顯示為省略號

2021-10-04 15:08:48 字數 1803 閱讀 7458

<

!doctype

html

>

"utf-8"

>

測試<

/title>

<

/head>

overflow : hidden;

/*必須結合的屬性,當內容溢位元素框時發生的事情*/

text-overflow: ellipsis;

/*可以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字 。*/

display:

-webkit-box;

/*必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。*/

-webkit-line-clamp:2;

/*用來限制在乙個塊元素顯示的文字的行數。*/

-webkit-box-orient: vertical;

/*必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。*/

">

static:物件遵循常規流。top,right,bottom,left等屬性不會被應用。 relative: 物件遵循常規流,並且參照自身在常規流中的位置通過top,right,bottom,left屬性進行偏移時不影響常規流中的任何元素。 absolute:物件脫離常規流,使用top,right,bottom,left等屬性進行絕對定位,盒子的偏移位置不影響常規流中的任何元素,其margin不與其他任何margin摺疊。fixed:物件脫離常規流,使用top,right,bottom,left等屬性以視窗為參考點進行定位,當出現滾動條時,物件不會隨著滾動。center:物件脫離常規流,使用top,right,bottom,left等屬性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影響常規流中的任何元素,其margin不與其他任何margin摺疊。(css3)page:盒子的位置計算參照absolute。盒子在分頁**或者區域塊內,盒子的包含塊始終是初始包含塊,否則取決於每個absolute模式。(css3) sticky: 物件在常態時遵循常規流。它就像是 relative 和 fixed 的合體,當在螢幕中時按常規流排版,當捲動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。(css3)*

css3新增屬性可能存在描述錯誤及變更,僅供參考,持續更新

<

/p>

<

/body>

<

/html>

**樣式如下圖所示:

限制在乙個塊元素顯示的文字的行數。

-webkit-line-clamp是乙個 不規範的屬性(unsupported webkit property),它沒有出現在 css 規範草案中。

為了實現該效果,它需要組合其他外來的webkit屬性。常見結合屬性:

display: -webkit-box;必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。

-webkit-box-orient必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。

text-overflow可以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字 。

-webkit-line-clamp:

預設值: ? (?表示不清楚)

適用於:塊元素

繼承性:無

動畫性:否

計算值:指定的值

取值::塊元素顯示的文字的行數。

css限制文字行數且超出部分顯示省略號

實現方法 適用範圍 因使用了webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端 注 webkit line clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果,它需要組合其他的webkit屬性。常見結合屬性 display webkit box 必須結合的屬性 將物...

css設定文字超出範圍隱藏

display block 設定成塊狀元素 white space nowrap 設定段落內文字不換行 overflow hidden 設定內容溢位時,對溢位部分的操作 hidden 隱藏 text overflow ellipsis 文字溢位時,對溢位文字的操作,ellipsis 省略號overf...

CSS文字超出顯示省略號

white space nowrap overflow hidden text overflow ellipsis 但是因為兩個行內元素例如span一起的時候會出現一些間距,為了去掉這些間距我們可以給元素新增font size 0 但這樣做的話,會發現省略號消失了,但不新增font size 0 又...