我一直在使用word-wrap: break-word在div和spans中換行。但是，在表格單元格中似乎行不通。我有一個寬度設置為100%的表格，一行兩列。列中的文本雖然使用了上述的自動換行，但并不換行。這會導致文本超出單元格的邊界。這種情況發(fā)生在Firefox、Google Chrome和Internet Explorer上。
下面是源代碼的樣子:
td {
border: 1px solid;
}<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>以下內(nèi)容在Internet Explorer中對我有效。注意添加了table-layout:fixed CSS屬性
td {
border: 1px solid;
}<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</td>
<td>Short word</td>
</tr>
</table>或者
<span style="word-break:break-all;">longtextwithoutspace</span>您可以使用Firebug(或類似工具)仔細檢查您是否無意中繼承了以下規(guī)則:
white-space:nowrap;這可能會覆蓋您指定的換行符行為，從而中斷自動換行。(謝恩·李和啤酒我的評論。)要解決這個問題，您可以添加空白:normal到風格。
結(jié)果發(fā)現(xiàn)沒有什么好辦法。最接近我的是添加& quot溢出:隱藏；"到表格周圍的div并丟失文本。 不過，真正的解決方案似乎是拋棄table。使用div和相對定位，我能夠達到同樣的效果，減去& lt表& gt
2015年更新:這是給那些和我一樣想要這個答案的人的。6年后，這一工作，感謝所有的貢獻者。
* { /* this works for all but td */
word-wrap:break-word;
}
table { /* this somehow makes it work for td */
table-layout:fixed;
width:100%;
}如前所述，將文本放在div中幾乎是可行的。您只需指定div的寬度，這對于靜態(tài)布局來說是幸運的。
這個在FF 3.6，IE 8，Chrome上都能用。
<td>
<div style="width: 442px; word-wrap: break-word">
<!-- Long Content Here-->
</div>
</td>https://jsfiddle.net/krf0v6pw/
超文本標記語言
<table>
<tr>
<td class="overflow-wrap-hack">
<div class="content">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>
</td>
</tr>
</table>半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
.content{
word-wrap:break-word; /*old browsers*/
overflow-wrap:break-word;
}
table{
width:100%; /*must be set (to any value)*/
}
.overflow-wrap-hack{
max-width:1px;
}好處:
使用overflow-wrap:break-word而不是word-break:break-all。這樣更好，因為它首先嘗試斷開空格，只有當單詞比它的容器大時才切斷單詞。 沒有表格布局:需要修復。使用常規(guī)的自動調(diào)整大小。 不需要以像素為單位定義固定寬度或固定最大寬度。如果需要，定義父項的百分比。 在FF57、Chrome62、IE11、Safari11中測試
與...有問題
<td style="word-break:break-all;">longtextwithoutspace</td>當文本中有空格時，效果不太好，例如
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>如果word和tenlongerwithoutspace在一行中適合表格單元格，但長文本不適合，則長單詞將被一分為二，而不是換行。
替代解決方案:插入U+200B (ZWSP)，U+00AD(軟連字符) 或者在每個長單詞中的U+200C (ZWNJ)，比如說，在第20個字符之后(但是，請參見下面的警告):
td {
border: 1px solid;
}<table style="width: 100%;">
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooong word
</div>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>更改您的代碼
word-wrap: break-word;到
word-break:break-all;例子
<table style="width: 100%;">
<tr>
<td>
<div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
</td>
<td><span style="display: inline;">Short Content</span>
</td>
</tr>
</table>看看這個演示
<table style="width: 100%;">
<tr>
<td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
</td>
<td>
<span style="display: inline;">Foo</span>
</td>
</tr>
</table>在IE 8和Chrome 13中測試。
<table style="table-layout: fixed; width: 100%">
<tr>
<td>
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>這導致表格適合頁面的寬度，并且每列占據(jù)寬度的50%。
如果您希望第一列占據(jù)頁面的大部分空間，請為td添加寬度:80%,如下例所示，用您選擇的百分比替換80%。
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="width:80%">
<div style="word-wrap: break-word;">
longtexthere
</div>
</td>
<td><span style="display: inline;">Foo</span></td>
</tr>
</table>唯一需要做的就是增加& lttd & gt或& ltdiv & gt在& lttd & gt這取決于您想要實現(xiàn)的布局。
例如:
<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>或者
<table style="width: 100%;" border="1"><tr>
<td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>看來你需要設置自動換行:斷字；在塊元素(div)上，具有指定的(非相對)寬度。例如:
<table style="width: 100%;"><tr>
<td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>贏得獎金的答案是正確的，但如果表格的第一行有合并/連接的單元格(所有單元格的寬度相等)，則答案無效。
在這種情況下，您應該使用colgroup和col標記來正確顯示它:
<table style="table-layout: fixed; width: 200px">
<colgroup>
<col style="width: 30%;">
<col style="width: 70%;">
</colgroup>
<tr>
<td colspan="2">Merged cell</td>
</tr>
<tr>
<td style="word-wrap: break-word">VeryLongWordInThisCell</td>
<td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>我嘗試了所有，但在我的情況下，只是為我工作
white-space: pre-wrap;
word-wrap: break-word;我遇到了類似的問題。我在AngularJS應用程序的Bootstrap模型中有一個表。當我更改了表上的過濾器，長值s出現(xiàn)在相關(guān)的單元格中時，文本會溢出到單元格和模態(tài)之外。這個CSS最終修復了應用于TD的問題:
style="white-space:pre-wrap; word-break:break-word"這使得值即使在表內(nèi)容發(fā)生變化時也能正確換行。
這對我很有效:
<style type="text/css">
td {
/* CSS 3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}而表的屬性是:
table {
table-layout: fixed;
width: 100%
}
</style>如果您不需要表格邊框，請應用:
table{
table-layout:fixed;
border-collapse:collapse;
}
td{
word-wrap: break-word;
}這里常見的混淆問題是我們有兩個不同的css屬性:自動換行和自動換行。 除此之外，自動換行還有一個叫做斷字的選項..容易混淆:-)
通常這對我很有效，即使是在桌子里: 斷字:斷字；
這可能有幫助，
鋼性鑄鐵
.wrap-me{
word-break: break-all !important;
}<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
<td>Col 7</td>
</tr>
</thead>
<tbody>
<tr> <td class="wrap-me">tesetonlywithoutspacetesetonlywithoutspacetesetonlywithoutspace</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">Col 4</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
<tr>
<td class="wrap-me">test only</td>
<td class="wrap-me">test only</td>
<td class="wrap-me">test with space long text</td>
<td class="wrap-me">testwithoutspacetestonlylongtext</td>
<td class="wrap-me">Col 5</td>
<td class="wrap-me">Col 6</td>
<td class="wrap-me">Col 7</td>
</tr>
</tbody>
</table>我發(fā)現(xiàn)了一個在Firefox、Google Chrome和InternetExplorer 7-9上似乎都有效的解決方案。用于一側(cè)有長文本的兩列表格布局。我到處搜索類似的問題，在一個瀏覽器中工作的會破壞另一個，或者在一個表格中添加更多的標簽看起來像是糟糕的編碼。
我沒有用桌子。去救援。至少對于修復兩列布局來說，這基本上是一個術(shù)語表/字典/詞義設置。
和一些通用的樣式。
dl {
margin-bottom:50px;
}
dl dt {
background:#ccc;
color:#fff;
float:left;
font-weight:bold;
margin-right:10px;
padding:5px;
width:100px;
}
dl dd {
margin:2px 0;
padding:5px 0;
word-wrap:break-word;
margin-left:120px;
}<dl>
<dt>test1</dt>
<dd>Fusce ultricies mi nec orci tempor sit amet</dd>
<dt>test2</dt>
<dd>Fusce ultricies</dd>
<dt>longest</dt>
<dd>
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per.
</dd>
</dl>我有同樣的問題，這個工作對我來說很好
<style>
td{
word-break: break-word;
}
</style>
<table style="width: 100%;">
<tr>
<td>Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>默認情況下，表格會換行，因此請確保表格單元格的顯示是表格單元格:
td {
display: table-cell;
}style = " table-layout:fixed；寬度:98%；自動換行:斷字"
<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >演示-http://jsfiddle.net/Ne4BR/749/
這對我很有效。我有很長的鏈接，會導致網(wǎng)頁瀏覽器上的表格超過100%。 在IE、Chrome、Android和Safari上測試。
適用于Google Chrome和Firefox(未在InternetExplorer中測試)解決方案是將display: table-cell設置為塊元素。
如果適合你，你可以試試這個...
在你的td中放一個文本區(qū)，用白色背景禁用它，并定義它的行數(shù)。
<table style="width: 100%;">
<tr>
<td>
<textarea rows="4" style="background-color:white;border: none;" disabled> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</textarea>
</td>
<td><span style="display: inline;">Short word</span></td>
</tr>
</table>只是增加寬度。這對我很有效。
<td style="width:10%;"><strong>Item Name</strong></td>如果你只關(guān)心文本，你可以不用表格布局:固定
<table>
<tr>
<td>
Title
</td>
<td>
Length
</td>
<td>
Action
</td>
</tr>
<tr>
<td>
Long song name
</td>
<td>
3:11
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
<tr>
<td colspan=3>
<div style='width:200px;background-color:lime;margin-left:20px'>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>quick </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>foxed </div>
<div style='float:left;white-space:pre'>jumped </div>
<div style='float:left;white-space:pre'>over </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>lazy </div>
<div style='float:left;white-space:pre'>brown </div>
<div style='float:left;white-space:pre'>cat </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
<div style='float:left;white-space:pre'>the </div>
</div>
</td>
</tr>
<tr>
<td>
Long song name1
</td>
<td>
2:20
</td>
<td>
<button>
Buy Now!
</button>
</td>
</tr>
</table>在我的例子中，我必須結(jié)合使用斷字和空格預換行來達到最佳效果。希望它能幫助更多的人。
<td class="wrap-longtext">
long,longlonglonglonglonglonglong..................
</td>
<style>
.wrap-longtext
{
word-break: break-all;/* Use break-word, if you prefer sensible text than short width of the cell */
white-space: pre-wrap;
}
</style>看起來你在表格單元格中遇到了自動換行的問題，即使使用了自動換行:break-word；CSS屬性。一個可能的原因是表格元素有自己的布局規(guī)則，這些規(guī)則可能會覆蓋您在單個單元格上設置的屬性。
要解決此問題，您可以嘗試將table元素的table-layout屬性設置為fixed，這將強制表格單元格具有固定的寬度和高度，并允許自動換行正常工作。
下面是添加了table-layout屬性的代碼的更新版本:
<style>
td {
border: 1px solid;
}
table {
width: 100%;
table-layout: fixed; /* Add this line */
}
</style>
<table>
<tr>
<td>
<div style="word-wrap: break-word;">
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
</div>
</td>
<td>
<span style="display: inline;">Short word</span>
</td>抱歉，如果代碼縮進不太好