Html 在 <td> 标签中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1057574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrap text in <td> tag
提问by Jitender Mahlawat
I want to wrap some text that is added to a <td>element.
I have tried with style="word-wrap: break-word;" width="15%".
But it is not wrapping the text. Is it mandatory to give it 100% width?
I have other controls to display so only 15% width is available.
我想包装一些添加到<td>元素的文本。我已经尝试过style="word-wrap: break-word;" width="15%"。但它没有包装文本。是否必须给它 100% 的宽度？我还有其他控件要显示，因此只有 15% 的宽度可用。
回答by Jitender Mahlawat
To Wrap TD text
换行 TD 文本
First set table style
首先设置表格样式
table{
table-layout: fixed;
}
then set TD Style
然后设置TD样式
td{
word-wrap:break-word
}
回答by Alsciende
HTML tables support a "table-layout:fixed" css style that prevents the user agent from adapting column widths to their content. You might want to use it.
HTML 表格支持“table-layout:fixed” css 样式，可防止用户代理根据其内容调整列宽。您可能想使用它。
回答by scunliffe
I believe you've encountered the catch 22 of tables. Tables are great for wrapping up content in a tabular structure and they do a wonderful job of "stretching" to meet the needs of the content they contain.
我相信你已经遇到了表的 catch 22。表格非常适合将内容包装在表格结构中，并且它们在“拉伸”方面做得很好，以满足它们包含的内容的需求。
By default the table cells will stretch to fit content... thus your text just makes it wider.
默认情况下，表格单元格会拉伸以适应内容...因此您的文本只会使其更宽。
There's a few solutions.
有几个解决方案。
1.) You can try setting a max-width on the TD.
1.) 您可以尝试在 TD 上设置最大宽度。
<td style="max-width:150px;">
2.) You can try putting your text in a wrapping element (e.g. a span) and set constraints on it.
2.) 您可以尝试将您的文本放在包装元素（例如跨度）中并对其设置约束。
<td><span style="max-width:150px;">Hello World...</span></td>
Be aware though that older versions of IE don't support min/max-width.
请注意，旧版本的 IE 不支持最小/最大宽度。
Since IE doesn't support max-width natively you'll need to add a hack if you want to force it to. There's several ways to add a hack, this is just one.
由于 IE 本身不支持最大宽度，如果你想强制它，你需要添加一个 hack。有多种方法可以添加 hack，这只是其中一种。
On page load, for IE6 only, get the rendered width of the table (in pixels) then get 15% of that and apply that as the width to the first TD in that column (or TH if you have headers) again, in pixels.
在页面加载时，仅适用于 IE6，获取表格的渲染宽度（以像素为单位），然后获取该宽度的 15%，并将其作为宽度应用到该列中的第一个 TD（或 TH，如果您有标题），以像素为单位.
回答by Costin
table-layout:fixedwill resolve the expanding cell problem, but will create a new one. IE by default will hide the overflow but Mozilla will render it outside the box.
table-layout:fixed将解决扩大细胞问题，但会创造一个新的。默认情况下，IE 会隐藏溢出，但 Mozilla 会将其呈现在框外。
Another solution would be to use: overflow:hidden;width:?px
另一种解决方案是使用： overflow:hidden;width:?px
<table style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
<td>
test
</td>
</tr>
</table>
回答by Samuel Adam
.tbl {
table-layout:fixed;
border-collapse: collapse;
background: #fff;
}
.tbl td {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
Credits to http://www.blakems.com/archives/000077.html
回答by All ?? Vаи?тy
This worked for me with some css frameworks (material design lite [MDL]).
这对我使用了一些 css 框架（material design lite [MDL]）。
table {
table-layout: fixed;
white-space: normal!important;
}
td {
word-wrap: break-word;
}
回答by ewwink
use word-breakit can be used without styling tableto table-layout: fixed
使用word-break它可以在不定型使用table，以table-layout: fixed
table {
width: 140px;
border: 1px solid #bbb
}
.tdbreak {
word-break: break-all
}<p>without word-break</p>
<table>
<tr>
<td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>
<p>with word-break</p>
<table>
<tr>
<td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>回答by Betty Mock
This works really well:
这非常有效：
<td><div style = "width:80px; word-wrap: break-word"> your text </div></td>
You can use the same width for all your <div's, or adjust the width in each case to break your text wherever you like.
您可以为所有<div' s使用相同的宽度，或者在每种情况下调整宽度以在您喜欢的任何地方中断文本。
This way you do not have to fool around with fixed table widths, or complex css.
这样你就不必在固定的表格宽度或复杂的 css 上胡闹。
回答by MikeL
I had some of my tds with:
我有一些我td的：
white-space: pre;
This solved it for me:
这为我解决了：
white-space: pre-wrap;
回答by Harsh Vakharia
To make cell width exactly same as the longest word of the text, just set width of the cell to 1px
要使单元格宽度与文本的最长单词完全相同，只需将单元格的宽度设置为 1px
i.e.
IE
td {
width: 1px;
}
This is experimentaland i came to know about this while doing trial and error
这是实验性的，我在反复试验时才知道这一点
Live fiddle: http://jsfiddle.net/harshjv/5e2oLL8L/2/
