div換行的CSS運用

2022-01-30 09:46:54 字數 1481 閱讀 8166

主要介紹word-warp和word-break屬性的使用。

word-wrap

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

取值:normal

:

預設值。允許內容頂開指定的容器邊界

break-word

:

內容將在邊界內換行。如果需要,詞內換行(word-break

)也將發生

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

此屬性僅作用於有布局的物件,如塊物件。內聯要素要使用該屬性,必須先設定物件的height

或width

屬性,或者設定position

屬性為absolute,或者設定display

屬性為block

此屬性對於currentstyle物件而言是唯讀的。對於其他物件而言是可讀寫的。

對應的指令碼特性為wordwrap

示例:div

word-break

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

取值:normal

:

預設值。允許在詞間換行

break-all

:

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

keep-all

:

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

說明:設定或檢索物件內文字的字內換行行為。尤其在出現多種語言時。

對於中文,應該使用break-all

此屬性對於currentstyle物件而言是唯讀的。對於其他物件而言是可讀寫的。

對應的指令碼特性為wordbreak

示例:div

載自:css 2.0樣式表中文手冊

css的div自動換行

相容 ie 和 ff 的換行 css 推薦樣式 最好的方式是 word wrap break word overflow hidden 而不是word wrap break word word break break all 也不是word wrap break word overflow auto...

div自動換行

它們的區別就在於 1,word break break all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長 congratulation等 它會把單詞截斷,變成該行末端為conra congratulation的前端部分 下一行為tulation cong...

div超出不換行 DIV元素不換行

div盒子預設是換行獨佔100 寬度 div盒子沒有賦予css樣式時,預設div盒子是獨佔一行 寬度為100 如下預設情況html html div例項 www.dvicss5.com 第乙個div 第二個盒子 獨佔一行div盒子截圖 2個div物件盒子獨佔一行,形成自動換行布局效果截圖 通過以上d...