CSS控制文字自動換行

2021-09-30 16:19:43 字數 1380 閱讀 8449

1.你定死**的寬度,即給**乙個寬度值(是數值,不是百分比)   

2.強制不換行

div自動換行

div強制英文單詞斷行

div3.總結了一下,只要在css中定義了如下句子,可保網頁不會再被撐開了。

table

td(word-break: break-all; word-wrap:break-word;)

注釋一下:

1.第一條table,此樣式可以讓**中有!!!(感嘆號)之類的字元時自動換行。

2.td,一般用這句這ok了,但在有些特殊情況下還是會撐開,因此需要再加上後面一句(word-wrap:break-word;)就可以解決。此樣式可以讓**中的一些連續的英文單詞自動換行。 

(1)語法:

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

引數:normal :  依照亞洲語言和非亞洲語言的文字規則,允許在字內換行

break-all :  該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字

keep-all :  與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字

(2)語法:

word-wrap : normal | break-word

引數:normal :  允許內容頂開指定的容器邊界

break-word :  內容將在邊界內換行。如果需要,詞內換行(word-break)也行發生

說明:設定或檢索當當前行超過指定容器的邊界時是否斷開轉行。

對應的指令碼特性為word-wrap。請參閱我編寫的其他書目。

(3)語法:

table-layout : auto | fixed

引數:auto :  預設的自動演算法。布局將基於各單元格的內容。**在每一單元格讀取計算之後才會顯示出來。速度很慢

fixed :  固定布局的演算法。在這演算法中,水平布局是僅僅基於**的寬度,**邊框的寬度,單元格間距,列的寬度,而和**內容無關

說明:如何讓**自動換行?

設定或檢索**的布局演算法。

對應的指令碼特性為tablelayout。

4.按照網上大多數文章的說法,只要在css中加入:

** ..........

code:

table

div就可以解決**和層被撐破,最初我也是這樣做的。不過這樣的**會造成乙個問題,你會發現英文詞全部被截斷了,這不符合英語的書寫習慣也不利於閱讀。

後來我發現上述**改寫一下就可以做到既防止**/層撐破又防止單詞斷裂了。

如下:**

code:

table

div

這也是現在我用的**。

CSS控制文字自動換行

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

CSS控制文字自動換行

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

CSS控制文字自動換行

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