css 自動換行屬性

2021-08-18 17:52:27 字數 1082 閱讀 7803

word-break 屬性規定自動換行的處理方法。

通過使用 word-break 屬性,可以讓瀏覽器實現在任意位置的換行。所有主流瀏覽器都支援 word-break 屬性。

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

normal 使用瀏覽器預設的換行規則。

break-all 允許在單詞內換行。

keep-all 只能在半形空格或連字元處換行。

word-break:break-all所有的都換行,右側換行沒有空隙。

word-wrap 屬性允許長單詞或 url 位址換行到下一行。

所有主流瀏覽器都支援 word-wrap 屬性。

語法: word-wrap: normal | break-word ;

normal 只在允許的斷字點換行(瀏覽器保持預設處理)。

break-word 在長單詞或 url 位址內部進行換行。

word-wrap:break-word如果這一行文字有可以換行的點,如空格、單詞或字元,讓這些換行點換行,這種換行會出現不對齊,右側空白的情況。

overflow-wrap 設定或檢索當內容超過指定容器的邊界時是否斷行。

說明: 

css3中將 <' word-wrap '> 改名為 <' overflow-wrap '>;瀏覽器支援情況:chrome(23.0+)、safari(6.1+)、opera(15.0+)、ios safari(7.0+)、 android browser(4.4.0+)、android chrome(22.0+)

由於歷史原因,當你使用 <' overflow-wrap '> 時,最好同時使用 <' word-wrap '> 作為備選,作向前相容。

對應的指令碼特性為overflowwrap。

語法:overflow-wrap:normal | break-word

normal:允許內容頂開或溢位指定的容器邊界。

break-word:內容將在邊界內換行。如果需要,單詞內部允許斷行。

css 自動換行

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap ddd111111111111111111...

CSS自動換行

1 換行 1 css實現td的自動換行 在做專案時有時會出現文字過多,一行不能完全顯示,需要換行顯示的要求,現在了解一下下吧 td元素的nowrap屬性表示禁止單元格中的文字換行,但使用時還要注意,nowrap屬性的行為與td元素的width屬性有關。若未設定td寬度,則nowrap屬性可以起作用,...

css自動換行

css自動換行有什麼技巧?大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div 1.ie瀏覽器 white space norma...