CSS - 保持表格单元格不会扩展和截断长文本

Question

CSS - 保持表格单元格不会扩展和截断长文本

有人可以告诉我为什么这不是截断文本？最后一个细胞不断增长.我不希望细胞增长超过允许的百分比.

<HTML>
    <TABLE id=section1 width="100%">
        <TBODY>
            <TR style="TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">
                <TD style="WIDTH: 8%;  TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL A</TD>
                <TD style="WIDTH: 18%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL B</TD>
                <TD style="WIDTH: 22%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL C</TD>
                <TD style="WIDTH: 14%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL D</TD>
                <TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL E</TD>
                <TD style="WIDTH: 10%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL F</TD>
                <TD style="WIDTH: 12%; TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">COL G</TD>
                <TD style="WIDTH: 4%;  TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</TD>
            </TR>
        </TBODY>
    </TABLE>
</HTML>

Run Code Online (Sandbox Code Playgroud)

这是关于jsFiddle的演示

Answer 1

red*_*vil 10

添加word-wrap: break-word到您的手机样式..

虽然你应该真的避免使用内联样式并为单元格声明一个类.

更新:

的jsfiddle

Answer 2

Eli*_*lka 7

为了正确起见,我更新了@redDevil建议的解决方案,以遵守现代Web标准:

标记

<table>
    <tbody>
        <tr>
            <td class="a">COL A</td>
            <td class="a">COL B</td>
            <td class="a">COL C</td>
            <td class="a">COL D</td>
            <td class="a">COL E</td>
            <td class="a">COL F</td>
            <td class="a">COL G</td>
            <td class="b">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</td>
        </tr>
    </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

样式

table {
    width: 100%;
    table-layout: fixed;
}
td {
    border: 1px solid #35f;
    overflow: hidden;
    text-overflow: ellipsis;
}
td.a {
    width: 13%;
    white-space: nowrap;
}
td.b {
    width: 9%;
    word-wrap: break-word;
}

Run Code Online (Sandbox Code Playgroud)

生活

这是关于jsFiddle 的演示

请注意

解决方案的很大一部分是设置table-layout: fixed;table元素.
另一部分 - 你知道的 - 正在为长细胞提供word-wrap: break-word;并删除overflow: hidden;规则.

归档时间：	13 年，7 月前
查看次数：	14026 次
最近记录：	11 年，8 月前