在html表格单元格中强行换行

Question

我试图找到一种方法来强制表格单元格中的换行符后,它内部的文本将变得超过最大允许大小的50%.

如何在没有任何JS功能的情况下使用纯CSS和CSS？

Answer 1

我认为你要做的是包装loooooooooooooong单词或URL,这样他们就不会推出表格的大小.(我刚刚尝试做同样的事!)

您可以使用DIV轻松完成此操作word-wrap: break-word(并且您可能还需要设置其宽度).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

但是,对于表,您必须将内容包装在DIV(或其他块标记)中或应用:table-layout: fixed.这意味着列宽不再是流动的,而是仅基于第一行中列的宽度(或通过指定的宽度)定义.在这里阅读更多.

示例代码:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

希望能帮到别人.

Answer 2

我建议你使用包装div或段落:

<td><p style="width:50%;">Text only allowed to extend 50% of the cell.</p></td>

你可以用它来创建一个类:

<td class="linebreak"><p>Text only allowed to extend 50% of the cell.</p></td>

td.linebreak p {
    width: 50%;
}

所有这一切都假设您在50%的细胞中意味着50%.