單行文字與多行文字的省略號寫法

2021-10-09 11:47:49 字數 569 閱讀 3024

white-space:nowrap;    (不折行)

overflow:hidden; (溢位隱藏)

text-overflow:ellipsis; (省略號)

display:-webkit-box   (核心,先把他變為乙個盒子)

overflow:hidden; (溢位隱藏)

word-break:break-all (允許在單詞內換行)

-webkit-box-orient

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

text-overflow:ellipsis; (省略號)

-webkit-line-clamp:number(數值) (從第幾行開始變成省略號)

語法:word-break : normal | break-all | keep-all

引數: normal :允許在字內換行

break-all : 語言文字行的任意字內斷開

keep-all : 不允許字(單詞內)斷開。

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

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

css 單行文字和多行文字超出顯示省略號

單行文字超出顯示省略號 white space nowrap 文字強制不換行 text overflow ellipsis 文字溢位顯示省略號 overflow hidden 溢位的部分隱藏 多行文字超出顯示省略號 overflow hidden webkit line clamp 2 超出兩行 t...

多行文字顯示省略號

單行文字溢位顯示省略號 核心css語句 1 overflow hidden 顧名思義超出限定的寬度就隱藏內容 2 white space nowrap 設定文字在一行顯示不能換行 3 text overflow ellipsis 規定當文字溢位時顯示省略符號來代表被修剪的文字 多行文字溢位顯示省略號...