css 單行或多行多出文字加省略號

2021-08-21 17:34:54 字數 480 閱讀 7166

單行:

overflow:hidden; //超出的文字隱藏

text-overflow:ellipsis; //溢位用省略號顯示

white-space:nowrap; //溢位不換行

多行(2行以上)

overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

多行描述:

display:-webkit-box; //將物件作為彈性伸縮盒子模型顯示。

-webkit-box-orient:vertical; //從上到下垂直排列子元素(設定伸縮盒子的子元素排列方式)

-webkit-line-clamp:2; //這個屬性不是css的規範屬性,需要組合上面兩個屬性,表示顯示的行數。

CSS 控制多出文字顯示省略號

由於網頁排版需要,有些地方過長的文字需要加省略號。比如,限制標籤寬度為100px,超出寬度的部分就用神略號顯示,如上圖 html標籤 label title 控制多出文字顯示省略號 控制多出文字顯示省略號 css 樣式 label 說明 標籤寬度一定要設定,可以根據實際情況調整 display bl...

css 文字超出隱藏顯示省略號(單行或多行)

單行的時候 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行倆行或以上時 overflow hidden text overflow ellipsis 溢位用省略號顯示 display w...

關於文字單行或多行顯示省略號。

在移動端寫前端的時候,經常會遇到,需要將文字設定成一行或者多行顯示,多餘的字程式設計省略號的問題 一行顯示 pwhite space nowrap 這個屬性宣告建立布局過程中如何處理元素中的空白符 normal 預設。空白會被瀏覽器忽略。pre 空白會被瀏覽器保留。其行為方式類似 html 中的標籤...