關於css樣式控制文字折行顯示的一點心得

2021-09-03 01:20:08 字數 468 閱讀 5018

這兩天專案中出現乙個bug,就是當用的元素顯示一段長文字時,文字內容需要自動折行,**中通過設定樣式word-wrap: break-word;word-break:break-all;來實現折行。但是在chrome瀏覽器,ie瀏覽器中,該設定對於長串的字母、數字和中文文字都是可以生效的,對於長串的標點符號卻不生效;在火狐瀏覽器中該設定對於上述情況都生效。

為了解決這個問題,查了一些資料,也試了各種設定,最後發現需要設定的樣式style="table-layout:fixed;" 同時將的樣式break-word  設定為normal或直接去掉該設定,長串的中英文標點可以實現折行。需要注意的是和需要指定長度(可以設定成百分比),同時必須設定table-layout:fixed

如果不用而是用來顯示文字,則只要設定word-wrap: break-word; 就可以了,也可以設定成 word-wrap: break-word; word-break:normal;這兩種設定效果相同。

css 文字折行

word wrap break word overflow hidden 而不是word wrap break word word break break all 也不是word wrap break word overflow auto 這種最好的方式,在 ie 下沒有任何問題,在 ff 下,長串...

CSS設定文字折行處理

一般情況 只要定好文字所在容器的寬度文字就會折行,如下面 想控制一段文字不折行,設定如下的樣式 white space nowrap word wrap normal word break keep all 相反,如果一段文字不能折行了,那麼可能是設定了如上的樣式,則將樣式改為 white spac...

CSS文字如何折行介紹

white space 屬性設定程式設計客棧如何處理元素內的空白 空格 換行和tab字元 的處理。normal 預設。空白會被瀏覽器忽略。pre 空白會被瀏覽器保留。其行為方式類似 html 中的 標籤。nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到 程式設計客棧lt br 標籤為止。...