为什么我的td不包含其内容

时间:2012-08-16 23:21:18

标签: css3 word-wrap

我有一个表格单元格,它一直阻止包裹它的内容(跨度)。以下是根据Chrome开发工具提供的方案:

<td>具有以下规则:

overflow:visible;
white-space:normal;

<table>有:

table-layout:fixed;

表中的第一行有两列定义了固定宽度;有问题的单元格有padding="2"

据我所知应该这样做,但它并不包含内容。我尝试过以下规则未成功:

word-break: break-all;
word-wrap: break-word;
max-width: 120px; /*this is the max width I want to ensure*/

我在这里缺少什么?

1 个答案:

答案 0 :(得分:1)

我不知道您的代码到底是怎么回事,因为您没有发布它,但我按照您的说明操作,它对我有用。

请在此处查看:http://jsfiddle.net/FJ7dB/

HTML:

<table>
    <tr>
        <td>TD-1-1</td>
        <td padding="2">
            <span>TD-1-2 ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</span>
        </td>
    </tr>
    <tr>
        <td>TD-2-1</td>
        <td>TD-2-2</td>
    </tr>
</table>

CSS:

table{
    table-layout:fixed;
    border:1px solid blue;
}
td{
    width:120px;
    max-width:120px;
    word-break: break-all;
    word-wrap: break-word;
    border:1px solid red;
}

使它起作用的是max-width,你说它不成功。

没有必要设置

overflow:visible;
white-space:normal;

因为visiblenormal是他们的默认值。