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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (112)

我有一个长词

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

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

结果是:

现在我至少可以确定数据显示了(即使当浏览器调整了尺寸,也就是更小的分辨率)。

提问于
用户回答回答于

除了对word-wrap单元格的规则之外,还可以将CSS规则添加table-layout:fixed到表格中(可能还有宽度)。

用户回答回答于

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

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

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励