我试图找到一种方法,在表格单元格中的文本长度超过最大允许长度的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,也许你会得到更好的答案。