不影响表格单元格的自动换行 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12694941/
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
Word-wrap CSS property not affecting a table cell
提问by its_me
I have one long word...
我有一个很长的词...
p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"
p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"
...that I am trying to fit in a table cell (<td>), for which I've tried using word-wrap: break-word;and the like to force the text to wrap, but none of them seem to have any affect on the text.
...我试图适应表格单元格 ( <td>)，为此我尝试使用word-wrap: break-word;等来强制文本换行，但它们似乎都没有对文本产生任何影响。
( HERE'S THE LIVE EXAMPLE)
（这是现场示例）
Click on the image to enlarge!
点击图片放大！
The text goes on and on horizontally, and doesn't wrap. Which CSS property am I supposed to be using here?
文本在水平方向上不断重复，并且不会换行。我应该在这里使用哪个 CSS 属性？
THE CODE
编码
<table>
<thead>
<tr>
<th>Name
</th><th>Type
</th><th>Value
</th><th>TTL
</th></tr>
</thead>
<tbody>
<tr>
<td>wtnmail._domainkey.whatthenerd.com.</td>
<td>TXT</td>
<td>"v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"</td>
<td>300</td>
</tr>
</tbody>
</table>
CSS
CSS
Based on j08691's answer, I am using this now:
基于 j08691 的回答，我现在使用这个：
table {
table-layout: fixed;
word-break: break-all;
word-wrap: break-word;
}
And that's resulted in this:
这导致了这个：
Click on the image to enlarge!
点击图片放大！
Yes, the table isn't super stylish as it used to be, but now I can at least be sure that the data shows (even when the browser is resized i.e. smaller resolutions).
是的，表格不像以前那样超级时尚，但现在我至少可以确定数据显示（即使浏览器调整大小，即更小的分辨率）。
Still looking for an elegant solution, if any.
仍在寻找一个优雅的解决方案，如果有的话。
采纳答案by j08691
In addition to your word-wraprule on the cell, add the CSS rule table-layout:fixedto your table (and possibly a width).
除了word-wrap单元格上的规则之外，还将CSS 规则添加table-layout:fixed到表格中（可能还有宽度）。
回答by PJ McCormick
word-break: break-word;worked for me on .entry-content table tdwhile editing in Chrome's Inspector.
word-break: break-word;.entry-content table td在 Chrome 的检查器中编辑时为我工作。
To apply it only to offending tdcells, you could create a specific class and add it to the td's HTML:
要将其仅应用于违规td单元格，您可以创建一个特定的类并将其添加到 td 的 HTML 中：
.break-word {
word-break: break-word;
}
回答by Kristof O
Maybe a tip for anyone who still has problems with break-word:
I had to add white-space: normalbecause it was set on 'nowrap'
对于仍然遇到断字问题的人来说，这可能是一个提示：我必须添加，white-space: normal因为它设置为“nowrap”
Especially if you use bootstrap some elements like the labels have white-space: nowrap
特别是如果您使用引导程序，则标签等某些元素具有 white-space: nowrap
回答by KatieK
Your text iswrapped - notice how it breaks after k=rsa;because you have a space there. But there's no space in the p=value to break on.
您的文本已换行 - 请注意它是如何中断的，k=rsa;因为那里有空格。但是p=价值中没有空间可以突破。
However, you can add a word-break: break-all;specification to that element, which might be closer to what you're looking for. See http://jsfiddle.net/zu6Eh/.
但是，您可以word-break: break-all;向该元素添加规范，这可能更接近您要查找的内容。见http://jsfiddle.net/zu6Eh/。
