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

krcsximq  于 2022-12-27  发布在  其他
关注(0)|答案(5)|浏览(236)

我正试图找到一种方法来强制换行符后,在表格单元格内的文本将成为长于说50%的最大允许大小。
没有任何JS函数,只使用纯HTML和CSS,我怎么能做到呢?

dojqjjoe

dojqjjoe1#

我认为您尝试做的是 Package looooooooooooooooong单词或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%;
}

但是,对于表格,您必须将内容 Package 在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 */
}

希望能帮到你们。

pepwfjgg

pepwfjgg2#

我建议你使用一个 Package 器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%。

ru9i0ody

ru9i0ody3#

您可以将文本放入一个div(或其他容器)中,宽度为50%。
http://jsfiddle.net/6gjsd/

6uxekuva

6uxekuva4#

没有HTML很难回答你的问题,但一般来说你可以这样写:

style="width: 50%;"

在表格单元格中,或者在表格单元格中放置一个div,然后在上面放置样式。
但有一个问题是“什么的50%?”它是父元素的50%,这可能不是您想要的。
贴一份你的HTML,也许你会得到一个更好的答案。

oxiaedzo

oxiaedzo5#

尝试使用

<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,它适用于正常/真实场景中的文字,不适用于随机键入的无间隙字母

相关问题