循环CSS属性不影响表单元格 [英] Word-wrap CSS property not affecting a table cell

问题描述

我有一个长字...

P = MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx + wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg / FuJXU7RYdPQ2Ka ++ tfw0Z9 + SRKatLUQQeCqLK8z1 / V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc + NidiW4 / ixw4QIDAQAB

...我试图适合表格单元格（< td> ），为此我尝试使用 word-wrap：break-word; 等强制文本换行，对文本有任何影响。

（这里的实例 ）

点击图片放大：

文字在水平方向上进行，不会换行。我应该在这里使用哪个CSS属性？

---

代码

 < table> 
< thead> 
< tr> 
< th>名称
< / th>< th>输入
< / th>< th>值
< / th> TTL 
< / th>< / tr> 
< / aad> 
< 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; 
} 
  

结果是：

点击图片放大！

是的，表是不是超级时尚，因为它以前是，但现在我至少可以确保数据显示（即使浏览器调整大小，即较小的分辨率）。

>除了您的 word-wrap 规则，添加CSS规则 table-layout：fixed 表格（可能还有宽度）。

jsFiddle示例

I have one long word...

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

...that I am trying to fit in a table cell (<td>), for which I've tried using word-wrap: break-word; and the like to force the text to wrap, but none of them seem to have any affect on the text.

( HERE'S THE LIVE EXAMPLE )

Click on the image to enlarge!

The text goes on and on horizontally, and doesn't wrap. Which CSS property am I supposed to be using here?

---

THE CODE

<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

Based on j08691's answer, I am using this now:

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

And that's resulted in this:

Click on the image to enlarge!

Yes, the table isn't super stylish as it used to be, but now I can at least be sure that the data shows (even when the browser is resized i.e. smaller resolutions).

Still looking for an elegant solution, if any.

解决方案

In addition to your word-wrap rule on the cell, add the CSS rule table-layout:fixed to your table (and possibly a width).

jsFiddle example

这篇关于循环CSS属性不影响表单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！