自动换行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单元格的规则外,table-layout:fixed还要将CSS规则添加到表中(可能还有宽度).

jsFiddle例子

Answer 2

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

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

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

Answer 3

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

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