我有一个很长的词。
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;
}
这导致了这个结果:
单击图像放大!
是的,这个表格不像以前那么时髦了,但现在我至少可以确定数据显示出来了(即使浏览器调整了大小,也就是分辨率变小了)。
仍然在寻找一个优雅的解决方案,如果有的话。
发布于 2012-10-03 01:12:28
除了单元格上的word-wrap
规则之外,将CSS规则table-layout:fixed
添加到表中(可能还包括宽度)。
发布于 2012-10-03 01:13:16
我在.entry-content table td
上使用Chrome进行编辑时,word-break: break-word;
为我工作。
要仅将其应用于违规的td
单元格,您可以创建一个特定的类并将其添加到td的超文本标记语言中:
.break-word {
word-break: break-word;
}
发布于 2015-09-23 20:51:28
对于那些在断词方面仍然有问题的人,也许有一个建议:我不得不添加white-space: normal
,因为它被设置在'nowrap‘上。
特别是在使用bootstrap的情况下,某些元素(如标签)具有white-space: nowrap
https://stackoverflow.com/questions/12694941
复制相似问题