讓DIV中文字換行顯示

原文:

讓div中文字換行顯示

1.

<

style
>
div     
style
>
<
div 
style
=" width:100px; border:1px solid red"
>
i am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
div>

2.這三句重點在於:word-break與word-wrap

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

提示：通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行。值描述

normal

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

break-all

允許在單詞內換行。

keep-all

只能在半形空格或連字元處換行。 值

描述normal

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

break-word

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

還是看示例:

<

style
>
div     
style
>
<
div 
style
=" width:100px; border:1px solid red"
>
i am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
div>

將dobiiiiiiiiiiiiiiiiiii做為乙個整體進行換行顯示。

<

style
>
div     
style
>
<
div 
style
=" width:100px; border:1px solid red"
>
i am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
div>

將dobiiiiiiiiiiiiiiiiiii截斷進行換行顯示。

我想這下這兩個的區別應該很清楚了吧！

讓DIV中文字換行顯示

1.i am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 未加css前效果 2.這三句重點在於 word break與word wrap a word break 屬性規定自動換行的處理方法。提示 通過使用 word break 屬性，可以讓瀏覽器實現在任意位...

div中內容文字垂直居中 文字不換行顯示省略號

目錄 div中文字垂直居中 2 文字不換行，文字溢位顯示省略標誌 1 行高法 文字的行高和容器的高度相同，p2 內邊距 padding 法 適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中 p3 css3的transform來實現 center vertical.center h...

設定div中文字超出時自動換行

設定div中文字超出時自動換行 一 對於div強制換行 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap 2.firefox瀏覽器 white space normal word break break al...