CSS控制文字內容換行

2021-08-31 22:08:38 字數 2623 閱讀 4705

在div中,文字布局經常出現,換行混亂的情況。

我們經常遇到的問題表現為:

1.如果是全英文本串,中間不包含任何符號(包括空格),不自動換行;

2.中英文混寫,則在英文本串的開始處換行(英文長度》div長度),結尾處不換行;

3.英文整個單詞換行。等等,可能還有一些問題,這裡只列出了常見的幾個。

上面幾個css屬性即可幫助我們協調解決這些問題。

各自功能的簡單用法介紹:

word-wrap:normal | break-word; (內容換行)

normal:預設的屬性值.(允許內容頂開指定的容器邊界).

break-word:內容將在邊界內換行(不截斷英文單詞換行,截斷英文單詞下面的屬性才具備這個功能。) 

word-break:normal | break-all | keep-all (詞內換行)

normal:如果是中文則到邊界處的漢字換行,如果是英文整個詞換行,注意:如果出現某個英文本串長度超過邊界,則後面的部分將撐開邊框,如果邊框為固定屬性,則後面部分將無法顯示.

break-all : 強行換行,將截斷英文單詞

keep-all : 不允許字斷開。如果是中文將把前後標點符號內的乙個漢字短語整個換行,英文單詞也整個換行,注意:如果出現某個英文.字串長度超過邊界,則後面的部分將撐開邊框,如果邊框為固定屬性,則後面部分將無法顯示.

text-overflow:clip | ellipsis  (文字溢位)

clip :  不顯示省略標記(...),而是簡單的裁切

ellipsis :  當物件內文字溢位時(超過width部分)顯示省略標記(...)

white-space: normal | pre | nowrap  (內容不換行)

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

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

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

標籤為止。

(層中放乙個**,如果層的float:none  則**和層間會有空隙,這種問題的解決辦法是在層的style裡面加上white-space: nowrap)

使用方式: word-break:break-all;

一般情況下:

.body

.css

ie與firefox將它看成是乙個長單詞了,因此不會自動換行。

對於ie,可以通過ie專有的css屬性word-wrap即可實現自動換行:word-wrap:break-word;

對於firefox,css2標準並沒有定義類似word-wrap的屬性,可以通過overflow屬性將撐出的部分隱藏:overflow:hidden

區別分析:

word-break:break-all和word-wrap:break-word都是能使其容器如div的內容自動換行。它們的區別就在於:

1,word-break:break-all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長(congratulation等),它會把單詞截斷,變成該行末端為conra(congratulation的前端部分),下一行為tulation(conguatulation)的後端部分了。

2,word-wrap:break-word 例子與上面一樣,但區別就是它會把congratulation整個單詞看成乙個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉的。

3,word-break;break-all 支援版本:ie5以上 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字。 word-wrap:break-word 支援版本:ie5.5以上 內容將在邊界內換行。如果需要,詞內換行( word-break )也將發生。**自動換行,避免撐開。 word-break : normal | break-all | keep-all 引數: normal : 依照亞洲語言和非亞洲語言的文字規則,允許在字內換行 break-all : 該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字 keep-all : 與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字 語法: word-wrap : normal | break-word 引數: normal : 允許內容頂開指定的容器邊界 break-word : 內容將在邊界內換行。如果需要,詞內換行(word-break)也行發生說明:設定或檢索當當前行超過指定容器的邊界時是否斷開轉行。

對應的指令碼特性為wordwrap。請參閱我編寫的其他書目。 語法: table-layout : auto | fixed 引數: auto : 預設的自動演算法。布局將基於各單元格的內容。**在每一單元格讀取計算之後才會顯示出來。速度很慢 fixed : 固定布局的演算法。在這演算法中,水平布局是僅僅基於**的寬度,**邊框的寬度,單元格間距,列的寬度,而和**內容無關說明:設定或檢索**的布局演算法。對應的指令碼特性為tablelayout。

個人看法:word-break 用3c檢測會顯示問題的,這個屬性opera firefox 瀏覽器也不支援。word-break屬性可以用white-space:normal;來代替,這樣在firefox和ie下就都能正確換行,而且要注意,單詞間的空格不能用來代替,不然不能正確換行。

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 注釋一下...