首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >不影响表格单元格的自动换行CSS属性

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

Stack Overflow用户
提问于 2012-10-03 01:07:15
回答 4查看 27.9K关注 0票数 17

我有一个很长的词。

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

...that我正在尝试适应表格单元格(<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;
}

这导致了这个结果:

单击图像放大!

是的,这个表格不像以前那么时髦了,但现在我至少可以确定数据显示出来了(即使浏览器调整了大小,也就是分辨率变小了)。

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-10-03 01:12:28

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

票数 13
EN

Stack Overflow用户

发布于 2012-10-03 01:13:16

我在.entry-content table td上使用Chrome进行编辑时,word-break: break-word;为我工作。

要仅将其应用于违规的td单元格,您可以创建一个特定的类并将其添加到td的超文本标记语言中:

.break-word {
    word-break: break-word; 
}
票数 5
EN

Stack Overflow用户

发布于 2015-09-23 20:51:28

对于那些在断词方面仍然有问题的人,也许有一个建议:我不得不添加white-space: normal,因为它被设置在'nowrap‘上。

特别是在使用bootstrap的情况下,某些元素(如标签)具有white-space: nowrap

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12694941

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档