淘先锋技术网

首页 1 2 3 4 5 6 7

我试图找到一种方法,在表格单元格中的文本长度超过最大允许长度的50%时,强制表格单元格换行。

没有任何JS函数,只用纯HTML加CSS怎么做?

我认为你要做的是把长单词或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 */
}

希望对某人有所帮助。

我建议您使用包装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%的细胞。

这项工作对我来说,没有使用表格布局:固定;因此,您仍然可以自由设置每列。

table td {
    word-break: break-all;
    word-wrap: break-word;
}

您可以将文本放入宽度为50%的div(或其他容器)中。

http://jsfiddle.net/6gjsd/

尝试使用

<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很难回答你,但一般来说你可以把:

style="width: 50%;"

或者在表格单元格中放置一个div,并将样式放在上面。

但有一个问题是“什么的50%”它是父元素的50%,这可能不是您想要的。

贴一份你的HTML,也许你会得到更好的答案。