在html表格单元格中强制换行 [英] force line break in html table cell

问题描述

我正在尝试找到一种方法来强制表格单元格中的文本变得比允许的最大大小的50％长，从而在表格单元格中强制换行。

I'm trying to find a way to force line break in table cell after text inside of it will become longer than say 50% of max allowed size.

如何在不使用任何JS函数的情况下使用纯HTML和CSS来实现它？

How can I do it without any JS function, using just pure HTML with CSS?

推荐答案

我认为您要尝试的是包装loooooooooooooong单词或URL，这样它们就不会超出表格的大小。 （我一直在尝试做同样的事情！）

I think what you're trying to do is wrap loooooooooooooong words or URLs so they don't push the size of the table out. (I've just been trying to do the same thing!)

您可以通过给DIV赋予样式 word-来轻松实现此目的。换行：break-word （并且您可能还需要设置其宽度）。

You can do this easily with a DIV by giving it the style word-wrap: break-word (and you may need to set its width, too).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

但是，对于表，您必须包装DIV（或其他块标记）中的内容，或应用：表布局：固定。这意味着列的宽度不再是固定的，而是仅基于第一行中列的宽度（或通过指定的宽度）定义。 在此处了解更多信息。

However, for tables, you must either wrap the content in a DIV (or other block tag) or apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). 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 */
}

希望对别人有帮助。

这篇关于在html表格单元格中强制换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！