在 html 表格单元格中强制换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6843412/
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
force line break in html table cell
提问by dantuch
I'm trying to find a way to force line break in table cell after text inside of it will become longer than say 50% of max allowed size.
我试图找到一种方法，在表格单元格中的文本长度超过最大允许大小的 50% 后，强制在表格单元格中换行。
How can I do it without any JS function, using just pure HTML with CSS?
如何在没有任何 JS 函数的情况下，仅使用带有 CSS 的纯 HTML 来实现？
回答by Simon East
I think what you're trying to do is wrap loooooooooooooong words or URLs so they don't push the size of the table out. (I've just been trying to do the same thing!)
我认为您要做的是将 looooooooooooooong 单词或 URL 包装起来，这样它们就不会将表格的大小挤出来。（我一直在尝试做同样的事情！）
You can do this easily with a DIV by giving it the style word-wrap: break-word(and you may need to set its width, too).
您可以通过为 DIV 设置样式来轻松完成此操作word-wrap: break-word（您可能还需要设置其宽度）。
div {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
width: 100%;
}
However, for tables, you must either wrap the content in a DIV (or other block tag) or apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.
但是，对于 tables，您必须将内容包装在 DIV（或其他块标记）中或 apply: table-layout: fixed。这意味着列宽不再是可变的，而是仅根据第一行中的列宽（或通过指定的宽度）定义的。在这里阅读更多。
Sample code:
示例代码：
table {
table-layout: fixed;
width: 100%;
}
table td {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
Hope that helps somebody.
希望能帮助某人。
回答by orlp
I suggest you use a wrapper div or paragraph:
我建议您使用包装 div 或段落：
<td><p style="width:50%;">Text only allowed to extend 50% of the cell.</p></td>
And you can make a class out of it:
你可以用它来创建一个类：
<td class="linebreak"><p>Text only allowed to extend 50% of the cell.</p></td>
td.linebreak p {
width: 50%;
}
All of this assuming that you meant 50% as in 50% of the cell.
所有这些都假设您的意思是 50% 为单元格的 50%。
回答by Jamie Dixon
You could put the text into a div (or other container) with a width of 50%.
您可以将文本放入宽度为 50% 的 div（或其他容器）中。
回答by Ariel
It's hard to answer you without the HTML, but in general you can put:
没有 HTML 很难回答你，但通常你可以输入：
style="width: 50%;"
On either the table cell, or place a div inside the table cell, and put the style on that.
在表格单元格上，或在表格单元格内放置一个 div，然后将样式放在上面。
But one problem is "50% of what?" It's 50% of the parent element which may not be what you want.
但一个问题是“什么的 50%？” 它是父元素的 50%，这可能不是您想要的。
Post a copy of your HTML and maybe you'll get a better answer.
发布一份您的 HTML 副本，也许您会得到更好的答案。
回答by Vee_Sa
Try using
尝试使用
<table border="1" cellspacing="0" cellpadding="0" class="template-table"
style="table-layout: fixed; width: 100%">
as table style along with
作为表格样式以及
<td style="word-break:break-word">long text</td>
for td it works for normal/real scenario text with words, not for random typed letters without gaps
对于 td，它适用于带单词的普通/真实场景文本，不适用于无间隙的随机输入字母
