CSS，Text溢出表格单元格

时间：2021-11-13 22:18:31

I am working on Virtual Machine so I can't copy code... I will post the screens then. Problem is trivial I guess but I can't deal with it... please give me some suggestions:

我正在研究虚拟机,所以我无法复制代码......然后我会发布屏幕。问题是微不足道的我猜,但我不能处理它...请给我一些建议:

Table code: https://dl.dropboxusercontent.com/u/108321090/WWW1.png

表代码:https://dl.dropboxusercontent.com/u/108321090/WWW1.png

CSS code and sight of website: https://dl.dropboxusercontent.com/u/108321090/WWW.png

CSS代码和网站的视线:https://dl.dropboxusercontent.com/u/108321090/WWW.png

So in general as you can see on the 2nd link, there is a text in the row and it doesn't want ot wrap, it's going as lane all the time and goes out of table column border.

所以一般情况下,你可以在第二个链接上看到,行中有一个文本,它不想要包装,它一直作为通道进入并离开表列边界。

1 个解决方案

#1

22  

Illustrative Example

Suppose that you have a simple two-row table with two cells per row:

假设您有一个简单的两行表,每行有两个单元格:

<table>
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>Tiny text</td>
        <td>VeryLongNonBreakingLineOfTextThatNeedsToWrap</td>
    </tr>    
</table>

One of the cells has a very long word with no spaces, no hyphens so it will not break.

其中一个单元格有一个很长的单词,没有空格,没有连字符,所以它不会破坏。

Here is some CSS:

这是一些CSS:

table {
    border: 1px solid lightgray;
}
table th {
    background-color: silver;
    text-align: center;
    padding: 10px;
}
table td {
    width: 200px;
    border: 1px dotted silver;
    word-break: break-all;
}

The cells have a fixed width of 200px. However, because of the long non-breaking word, two things can happen.

细胞的固定宽度为200px。然而,由于长期不破坏的话,可能会发生两件事。

(1) The table may increase the column width to accommodate the long text.
(2) The text may flow out of a cell depending on other factors such as using a fixed layout with a specified table width.

(1)该表可以增加列宽以容纳长文本。 (2)文本可能会根据其他因素流出单元格,例如使用具有指定表格宽度的固定布局。

If you apply word-break: break-all to the table cells, the text will wrap and the table columns will retain their predefined widths.

如果对表格单元格应用word-break:break-all,则文本将换行,表格列将保留其预定义的宽度。

See demo at: http://jsfiddle.net/audetwebdesign/xtKLE/

请参阅演示:http://jsfiddle.net/audetwebdesign/xtKLE/

Reference

To learn more about the CSS3 word-break property: http://www.w3.org/TR/css3-text/#word-break

要了解有关CSS3分词属性的更多信息,请访问:http://www.w3.org/TR/css3-text/#word-break

#1

22  

Illustrative Example

Suppose that you have a simple two-row table with two cells per row:

假设您有一个简单的两行表,每行有两个单元格:

<table>
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td>Tiny text</td>
        <td>VeryLongNonBreakingLineOfTextThatNeedsToWrap</td>
    </tr>    
</table>

One of the cells has a very long word with no spaces, no hyphens so it will not break.

其中一个单元格有一个很长的单词,没有空格,没有连字符,所以它不会破坏。

Here is some CSS:

这是一些CSS:

table {
    border: 1px solid lightgray;
}
table th {
    background-color: silver;
    text-align: center;
    padding: 10px;
}
table td {
    width: 200px;
    border: 1px dotted silver;
    word-break: break-all;
}

The cells have a fixed width of 200px. However, because of the long non-breaking word, two things can happen.

细胞的固定宽度为200px。然而,由于长期不破坏的话,可能会发生两件事。

(1) The table may increase the column width to accommodate the long text.
(2) The text may flow out of a cell depending on other factors such as using a fixed layout with a specified table width.

(1)该表可以增加列宽以容纳长文本。 (2)文本可能会根据其他因素流出单元格,例如使用具有指定表格宽度的固定布局。

If you apply word-break: break-all to the table cells, the text will wrap and the table columns will retain their predefined widths.

如果对表格单元格应用word-break:break-all,则文本将换行,表格列将保留其预定义的宽度。

See demo at: http://jsfiddle.net/audetwebdesign/xtKLE/

请参阅演示:http://jsfiddle.net/audetwebdesign/xtKLE/

Reference

To learn more about the CSS3 word-break property: http://www.w3.org/TR/css3-text/#word-break

要了解有关CSS3分词属性的更多信息,请访问:http://www.w3.org/TR/css3-text/#word-break

标签：

相关文章