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

Question

我有一个长字...

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

...我正在尝试放入表格单元<td>格word-wrap: break-word;（

（这是活生生的例子）

点击图片放大！

文本在水平方向上继续，并且不换行。我应该在这里使用哪个 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 示例

Answer 2

word-break: break-word;.entry-content table td在 Chrome 的检查器中编辑时为我工作。

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

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

Answer 3

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

特别是如果您使用引导程序，一些元素，如标签有 white-space: nowrap

Answer 4

您的文本已换行 - 请注意它是如何中断的，k=rsa;因为您在那里有一个空格。但是价值没有空间p=可以突破。

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