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

2021-08-01 21:53:26 字數 650 閱讀 7274

在移動端寫前端的時候,經常會遇到,需要將文字設定成一行或者多行顯示,多餘的字程式設計省略號的問題

一行顯示:

p

white-space: nowrap; 

這個屬性宣告建立布局過程中如何處理元素中的空白符

normal 預設。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 html 中的標籤。

nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

pre-wrap 保留空白符序列,但是正常地進行換行。

pre-line 合併空白符序列,但是保留換行符。

inherit 規定應該從父元素繼承 white-space 屬性的值。

多行顯示:

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

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

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

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

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

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

文字超過單行 多行時顯示省略號

寫頁面的時候會遇到當內容超出一行或多行時要裁切超出部分並顯示省略號的情況,這裡簡單記錄一下 一行 text overflow ellipsis 當物件內文字溢位時顯示省略標記 overflow hidden 用於css隱藏超出內容 white space nowrap 無論內容有多少,都不會自動換行...

單行與多行文字顯示省略號

1 單行文字顯示省略號 html 我的熱情,好像一把火,燃燒了整個沙漠 css p2 多行文字顯示省略號 html 核爆神曲 中文詞 遠處的濃烈硝煙,點綴著寂寞荒原像筆尖 一點一點,畫出崎嶇的曲線。夕陽下你的側臉 漸行漸遠,只剩懦弱的我,躲在鏡子裡面。血的傷痛,淚的洶湧,狂風之中撕裂。溫柔微笑,溫柔...