强制换行在html表格单元格

前端之家收集整理的这篇文章主要介绍了强制换行在html表格单元格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图找到一种在表格单元格中强制换行的方式,其中的文本内容将会长于最大允许大小的50%.

没有任何JS函数,如何使用纯粹的HTML与CSS?

解决方法

我想你想要做的就是把looooooooooooooooo的这个单词或者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.这意味着列的宽度不再是流体,而是基于第一行中的列的宽度(或通过指定的宽度)定义的. 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相关文章