自动换行CSS属性不会影响表格单元格

Question

我有一个长话......

p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"

...我正在尝试使用表格单元格（<td>），我尝试使用word-wrap: break-word;等来强制文本换行，但没有一个似乎对文本有任何影响。

（ HERE'S THE LIVE EXAMPLE ）

点击图片放大！

文本在水平上继续，并且不会换行。我应该在这里使用哪个CSS属性？

---

代码

<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

根据j08691的回答，我现在正在使用它：

table {
   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-word;
}

这导致了这个：

点击图片放大！

是的，这张桌子不像过去那样超级时尚，但现在我至少可以确定数据显示（即使浏览器调整大小，即较小的分辨率）。

仍然在寻找一个优雅的解决方案，如果有的话。

Answer 1

除了您在单元格上的word-wrap规则外，还要将CSS规则table-layout:fixed添加到您的表格中（可能还有宽度）。

<强> jsFiddle example

Answer 2

在Chrome的Inspector中进行编辑时，{p> word-break: break-word;在.entry-content table td为我工作。

要仅将其应用于违规的td单元格，您可以创建一个特定的类并将其添加到td的HTML中：

.break-word {
    word-break: break-word; 
}

Answer 3

对于仍然遇到破解问题的人来说，也许是一个提示： 我必须添加white-space: normal，因为它设置在'nowrap'

上

特别是如果你使用bootstrap，一些元素如标签有white-space: nowrap

Answer 4

您的文字 已被包装 - 请注意k=rsa;后它的中断方式，因为您有空格。但是p=值没有空间可以突破。

但是，您可以向该元素添加word-break: break-all;规范，这可能更接近您要查找的内容。见http://jsfiddle.net/zu6Eh/。