昨天我在編輯某個網頁的時候,某種原因長按了乙個字母，結果發生下圖這樣的事情（內容已經被我重新修改過，但是原文還是跟它一樣，有一長串英文，然後是中文，接著是一段規則的英文）。
對此在csdn請教了高手，原來瀏覽器是把那一長串的英文當做了乙個單詞。
對此，我作了乙個極端的測試，就是在一長串英文中間加入標點符號等（注意是半形的標點符號），顯示如下圖：
可以看到只有在?號和-號（半形）和空格的地方換行，其他符號均不斷行。
對此，我是這麼認為的：瀏覽器把?號、-號、空格之間的英文本元全部看做乙個單詞，所以不會自動換行。（下文還會對「單詞進行討論」）
先看兩個關於文字換行的css屬性：
2.word-break.它有三個屬性值：
但看上面的解釋不好理解，來點實際例子罷！
先看中文字元的情況。
中文字元一般不會出現問題，他們都會自動換行，但是只要注意ie6和ie7，當在這兩個瀏覽器中設為word-wrap:nomal;word-break:keep-all時，不會斷行，直接跟著原來那一行溢位到容器外面，見圖1。下文對這個還會有所討論。
英文就比中文複雜一些了。
先理解一下「單詞」，前面（紅色字型）已經提過，「單詞」就是：?號、-號（別忘了都是半形的問號、減號）、空格之間的英文本元、標點符號的組合全部看做乙個單詞。例如huieuri.';fsijij就相當於乙個單詞，而husirheir?noijfdg相當於兩個單詞（中間的?是分隔）。
情況一：當設定為word-wrap:nomal;word-break:normal或者什麼都不設定時，中文顯示行尾的英文單詞都不被拆開換行。我是這麼理解的：文字是乙個單詞乙個單詞地「擺放」的，當某行擺放了一些單詞之後，發現下乙個單詞在這行剩下的空間裡面放不下了，那個這個單詞就會被放到下一行去。如果下一行還放不下這個單詞，也就是乙個單詞的長度比一行還要大（這個情況很極端的了），那麼這個單詞超出的內容就會沿著這行溢位到容器外面。見圖2。
如圖2，中間溢位的一行都相當於乙個單詞，它的上一行剩下的空間放不下它了，才把它放到這一行，但是這一行還放不下，它就只好原地溢位了。
當然，ie6是個非常詭異的傢伙，容器會被溢位的內容撐大，見圖3。
情況二：當設定為word-wrap:nomal;word-break:break-all或者前乙個不設而後者設為break-all時。
在firefox、opera、ie8中，效果跟情況一一樣。
而在webkit核心瀏覽器(chrome、safari)和ie6、ie7中，所有的單詞都會在行尾自動斷開。見圖4。
情況三：當設定為word-wrap:normal(或不設);word-break:keep-all時。
大部分瀏覽器中，效果跟情況一一樣，單詞不被拆開。
但是ie6、ie7中，連中文也不換行了！也就是說，連續的中文居然被看成了乙個單詞！見圖5(ie7效果)。而當遇到空格、逗號、頓號、雙引號、單引號、{號、書名號的時候，它們又能換行了！如圖6（ie6效果）。真不愧是厲害的瀏覽器，絕對的搞死人！
情況四：當設定成word-wrap:break-word;word-break:nomal(或後者不設定)時。
這時候大部分瀏覽器，效果跟情況一很像，不過情況一中的長英文串會溢位，而這裡的長英文串會自動被拆開換行，ie6、ie7中的問題也再也不存在。如圖7。
對此，我是這樣理解的（這裡要注意和上文藍色字型的區別）：文字還是乙個單詞乙個單詞地「擺放」，當某行擺放了一些單詞之後，發現下乙個單詞在這行剩下的空間裡面放不下了，那個這個單詞就會被放到下一行去。如果下一行還放不下這個單詞，也就是乙個單詞的長度比一行還要大，那麼這個單詞超出的內容就會被放到下一行。圖7中的紅色區域相當於乙個單詞。
可是這時候居然ie8給你來個耍大牌了！居然長英文串還是不肯換行，直接在原地溢位，跟情況一一樣！見圖8中ie8的顯示效果。
情況五：當設定為word-wrap:break-word;word-break:break-all時。
在opera、firefox中，效果跟情況四一樣。
在ie6、ie7、chrome、safari中，效果跟情況二一樣。所有的字元都會自動被拆開換行。
ie8中還是老樣子，長字元沒法換行。
情況六：當設定成word-wrap:break-word;word-break:keep-all時。
效果跟情況四一樣總結
css限制文字換行
css 設定文字只顯示一行，多餘顯示省略號 view text顯示多行 思路 1.超出的文字隱藏 2.溢位用省略號顯示 3.溢位不換行 4.將物件作為彈性伸縮盒子模型顯示 5.從上到下垂直排列子元素 設定伸縮盒子的子元素排列方式 6.這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示的行數...
css控制文字換行
設定為break word時，文字中的長單詞或url可以換行 換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa 新增換行後的效果 若css不設定word wrap，遇到長單詞時內容溢位，效果如圖所示 設定為break all時，文字遇到長單詞，會選擇在合適的位置截斷進行換行 換行換行...
css控制文字換行
設定為break word時，文字中的長單詞或url可以換行 換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa 新增換行後的效果 若css不設定word wrap，遇到長單詞時內容溢位，效果如圖所示 設定為break all時，文字遇到長單詞，會選擇在合適的位置截斷進行換行 換行換行...