CSS 裡的 word-break 屬性，將其設為 break-all 即可。
這時您就會發現本來應該超出 width=100 的文字卻自動折到下一行了!
P.S.若未設定 width ，則超過螢幕畫面最右側的字才會自動折行囉。
1、強制換行：
Example Source Code [mid.lt263.com/mb].AutoNewline
{
word-break: break-all;/*必須*/
}
</style>
<table>
<tr>
<td class="AutoNewline">自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行自動換行</td>
</tr>
</table>
2、強制不換行：
Example Source Code [mid.lt263.com/mb].NoNewline
{
word-break: keep-all;/*必須*/
}
</style>
<table>
<tr>
<td class="NoNewline">不換行不換行不換行不換行不換行不換行不換行不換行不換行不換行</td>
</tr>
</table>
另:
word-wrap:break-word;
是用來強迫截斷英文單字而換行。
********此段為參考，尚未試過************
自動換行
div{ word-wrap: break-word; word-break: normal; }
強制不換行
div{ white-space:nowrap; }
強制英文單詞斷行
div{ word-break:break-all; }
=========補充=================================
在我們設計網頁的時候，總會遇到一些不愉快的事情，最常見的莫過於在後台添加內容後才發現顯示的頁面被撐開，導致網頁極度不美觀。以前大家基本上都是設計 表格，網上自然不少對於的解決方法，如今還有div+css標準設計，很少看到相關好的方法，現在把平時找到的防止表格被撐開的好方法總結歸納一下，和大 家一起分享。
防止表格被撐開或div層被撐開的方法
在 我們設計網頁的時候，總會遇到一些不愉快的事情，最常見的莫過於在後台添加內容後才發現顯示的頁面被撐開，導致網頁極度不美觀。以前大家基本上都是設計表 格，網上自然不少對於的解決方法，如今還有div+css標準設計，很少看到相關好的方法，現在把平時找到的防止表格被撐開的好方法總結歸納一下，和大家 一起分享。
我們可以針對表格的屬性來限制大小防止被撐開，
比如在裡添加代碼「style="table-layout:fixed;word-wrap:break-word; word-break;break-all;"」，
其中「table-layout:fixed; 」是為了將表格佈局固定住，就可以有效地防止表格被撐開，
「word-wrap:break-word; 」是控制換行的，也就是強制執行換行，這個在文本內容較多的情況下需要使用到，特別是重複的內容出現，不執行換行的話，表格就被撐開了；
而「word- break: break-all; 」可以解決IE的框架被英文（非亞洲語言文本行）撐開的問題，
但是不會強制換行，只顯示表格寬度裡的內容。
一般情況下只要用到 「style="table-layout:fixed;word-wrap:break-word;"」就可以。當然，上面調用的語句可以定義在css 裡，比如
table {
table-layout: fixed;
word-wrap:break-word;
}
用css控制圖片自適應大小，代碼如：
img {
max-width: 600px;
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
其 中 max-width:600px; 在IE7、FireFox等其他非IE瀏覽器下最大寬度為600px，但在IE6中無效；width:600px; 在所有瀏覽器中圖片的大小為600px，當圖片大小大於600px，自動縮小為600px，在IE6中有效；而 overflow:hidden; 指將超出設置大小的部分隱藏，避免控制圖片大小失敗而引起的表格撐開變形。
最後總結一下最實用的代碼：
如果是表格，請用：
table {
table-layout: fixed;
word-break: break-all;
}
如果是div層，請用：
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上寬度;
overflow: hidden; (讓多出來的不顯示。)
}
**************補充************************
相容 IE 和 FF 的換行 CSS 推薦樣式
最好的方式是
|
以下是引用片段： |
而不是
|
以下是引用片段： |
也不是
|
以下是引用片段： |
在 IE 下沒有任何問題，在 FF 下，長串英文會被遮住超出的內容。
word-wrap同word-break的區別
word-wrap:
normal Default. Content exceeds the boundaries of its container.
break-word Content wraps to next line, and a word-break occurs when necessary. 必要時會觸發word-break。
word-break:
normal Default. Allows line breaking within words. 好像是只對Asian text起作用。
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
總結如下：
"word-wrap:"是控制換行的。
使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，就不起作用。
break-word是控制是否斷詞的。
normal是默認情況，英文單詞不被拆開。
break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。
keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）
ie下：
使用word-wrap:break-word;所有的都正常。
ff下：
如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。
為了解決長串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通 的英文語句中的單詞會被斷開（ie下也是）。
目前主要的問題存在於 長串英文 和 英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。
即英文單詞應不應該被斷開那？那問題很明顯了，顯然不應該被斷開了。
對於長串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。
用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。
所以，綜上，最好的方式是word-wrap:break-word;overflow:hidden;
而不是word- wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下沒有任何問題。在ff下，長串會被遮住部分內容。
另，測試代碼如下：
1.htm
<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
.c1{ width:300px; border:1px solid red}
<div class="c1">asdasd
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c1>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>
<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c2>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>
<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c3>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>
<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c4>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>
<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c5>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>
<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c6>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>
<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
This is all English. This is all English. This is all English.
</div>
<div class=c7>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c7>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>
===========================================================
大家都知道連續的英文或數字能是容器被撐大，不能根據容器的大小自動換行，下面是 CSS如何將他們換行的方法！
對於div
1.（IE流覽器）white-space:normal; word-break:break-all;這裏前者是遵循標準。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
eg.
<div id="wrap">ddd1111111111111111111111111111111111</div>
效果：可以實現換行
2.（Firefox流覽器）white-space:normal; word-break:break-all;overflow:hidden;同樣的FF下也沒有很好的實現方法，只能隱藏或者加捲軸，當然不加捲軸效果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
eg.
<div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果：容器正常，內容隱藏
對於table
1. (IE流覽器)使用樣式table-layout:fixed；
eg.
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以換行
2.(IE流覽器)使用樣式table-layout:fixed與nowrap
eg.
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以換行
3. (IE流覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：兩個td均正常換行
3.(Firefox流覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div
eg.
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
這裏單格寬度一定要用百分比定義
效果：正常顯示，但不能換行（注：在FF下還沒有能使容器內容換行的好方法，只能用overflow將多出的內容隱藏，以免影響整體效果）
本文來自: http://blog.xuite.net/s925517/mylife/85386335-%5BCSS%5D%E5%BC%B7%E5%88%B6HTML%E8%A1%A8%E6%A0%BC%E5%8有關翻譯的問題歡迎諮詢天成翻譯
留言列表
