css - 不影响表格单元格的自动换行 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;
}

结果是:

点击图片放大!

是的，该表格不像以前那样 super 时尚，但现在我至少可以确定数据显示(即使调整浏览器大小，即较小的分辨率)。

仍在寻找优雅的解决方案(如果有的话)。

Answer 1

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

jsFiddle example