關於文字省略號 css篇

一、單行文字省略

width:value;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

二、多行文字省略

display: -webkit-box; 

display: -moz-box;  
white-space: pre-wrap; 
word-wrap: break-word;
overflow: hidden; 
text-overflow: ellipsis; 
-webkit-box-orient: vertical; 
-webkit-line-clamp:2;   /*顯示行數*/

預設為white-space:normal。表示合併空格，多個相鄰空格合併成乙個空格，在原始碼中的換行作為空格處理，只會根據容器的大小進行自動換行。

white-space屬性

原始碼空格

原始碼換行

換行容器邊界換行

normal

合併忽略

換行換行

nowrap

合併忽略

換行不換行

pre保留

換行換行

不換行pre-wrap

保留換行

換行換行

pre-line

合併換行

換行換行

word-wrap 屬性允許長單詞或 url 位址換行到下一行。word-wrap：normal（預設）|break-word normal：允許內容頂開指定的容器邊界，如果單詞超長，會衝出邊界（在當前行顯示，不會換行）。 break-word： 內容將在邊界內換行，當單詞在當前行放不下時，會自動切換到下一行，必要時會觸發word-break（注意：請分辨清楚word-break和break-word這倆個是不同的東西，一為屬性另為引數）。 注：各個瀏覽器均能識別。

box-orient

box-orient用來確定子元素的方向。是橫著排還是豎著走。可選的值有：

horizontal | vertical | inline-axis | block-axis | inherit

擴充套件： box-direction, box-align, box-pack, box-lines。詳見

-webkit-line-clamp是webkit的私有屬性，是乙個不規範的屬性（unsupported webkit property），它沒有出現在 css 規範草案中。

-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性：

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

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

css文字省略號

1,單行溢位，超出部分顯示 或者擷取。前提必須有寬度。css 擷取為clip width 300px overflow hidden text overflow ellipsis white space nowrap 但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢...

css設定文字省略號

用這幾行 可以設定出後面的省略號 如果出現這種情況 下面有字露出，可以加上line height 20px 這樣就好了 webkit line clamp number用於顯示的行數 用來限制在乙個塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的webkit屬性 display webkit...

css 實現文字省略號 單行多行

在做移動端的專案時經常會遇到文字過長，塊級元素寬度不夠，造成折行的問題，產品會要求說根據寬度展示，超出部分用點號代替 做這種效果的時候會遇到單行展示和多行展示 單行示例 ellipsis single overflow hidden text overflow ellipsis white spac...