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。这意味着列宽不再是流体，而是仅基于第一行中列的宽度（或通过指定的宽度）定义。 Read more here

示例代码：

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％。

Answer 3

您可以将文本放入宽度为50％的div（或其他容器）中。

http://jsfiddle.net/6gjsd/

Answer 4

如果没有HTML，很难回答你，但一般来说你可以把：

style="width: 50%;"

在表格单元格上，或在表格单元格中放置一个div，然后将样式放在其上。

但有一个问题是“50％的什么？”它是父元素的50％，可能不是你想要的。

发布您的HTML副本，也许您会得到更好的答案。

Answer 5

尝试使用

<table  border="1" cellspacing="0" cellpadding="0" class="template-table" 
style="table-layout: fixed; width: 100%">

作为表格样式以及

<td style="word-break:break-word">long text</td>

td 它适用于带有单词的普通/真实场景文本，不适用于无间隙的随机键入字母

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

5 个答案: