文字使用CSS進行控制換行

2021-06-26 18:47:14 字數 946 閱讀 2608

css中white-space的值pre-wrap

css中white-space屬性設定如何處理元素內的空白。

預設值normal表示:空白會被瀏覽器忽略。

white-space這個屬性宣告建立布局過程中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 css 2.1 中新增的。在ie8以上和火狐、chrome中有效。

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

測試文字pre-wrap10個空格 keleyi.com

測試文字normal10個空格 keleyi.com

測試文字nowrap10個空格 keleyi.com

測試文字。

keleyi.com 。

這是一些文字。

這是一些文字。

這是一些文字。

上面**的效果:

測試文字。keleyi.com 。這是一些文字。這是一些文字。這是一些文字。

測試文字。

keleyi.com 。

這是一些文字。

這是一些文字。 k e l e y i.c o m

這是一些文字。

上面**的效果:

測試文字。

keleyi.com 。

這是一些文字。

這是一些文字。

這是一些文字。

white-space的值:

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

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

標籤。

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

標籤為止。

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

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

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

css控制文字換行

設定為break word時,文字中的長單詞或url可以換行 換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa 新增換行後的效果 若css不設定word wrap,遇到長單詞時內容溢位,效果如圖所示 設定為break all時,文字遇到長單詞,會選擇在合適的位置截斷進行換行 換行換行...

css控制文字換行

設定為break word時,文字中的長單詞或url可以換行 換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa 新增換行後的效果 若css不設定word wrap,遇到長單詞時內容溢位,效果如圖所示 設定為break all時,文字遇到長單詞,會選擇在合適的位置截斷進行換行 換行換行...

CSS控制文字自動換行

1.你定死 的寬度,即給 乙個寬度值 是數值,不是百分比 2.強制不換行 div自動換行 div強制英文單詞斷行 div3.總結了一下,只要在css中定義了如下句子,可保網頁不會再被撐開了。table td word break break all word wrap break word 注釋一下...