本文共 6780 字,大约阅读时间需要 22 分钟。
我一直在使用word-wrap: break-word
将文本div
和span
。 但是,它似乎在表单元格中不起作用。 我有一个表设置为width:100%
,有一行和两列。 列中的文本尽管使用上述word-wrap
样式设置,但不会自动换行。 它导致文本超出单元格的边界。 这发生在Firefox,Google Chrome和Internet Explorer上。
来源如下所示:
td { border: 1px solid; }
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word | Short word |
上面的长字比我页面的边界大,但与上面的HTML相同。 我尝试了以下添加text-wrap:suppress
和text-wrap:normal
,但是都没有帮助。
默认情况下,表格会自动换行,因此请确保表格单元格的显示为table-cell
:
td { display: table-cell;}
远射,但与 (或类似工具)仔细检查,您不会意外继承以下规则:
white-space:nowrap;
您指定的换行行为。
事实证明,没有做到这一点的好方法。 我最接近的是添加“ overflow:hidden;”。 到表格周围的div并丢失文本。 真正的解决方案似乎是放弃沟渠。 使用div和相对定位,我可以达到相同的效果,而无需使用<table>
2015年更新:适用于像我这样想要这些答案的人。 经过6年的努力,这一切都要感谢所有贡献者。
* { // this works for all but td word-wrap:break-word;}table { // this somehow makes it work for td table-layout:fixed; width:100%;}
赢得赏金的答案是正确的,但如果表的第一行具有合并/联接的单元格 (所有单元格的宽度相等),则该答案将无效。
在这种情况下,您应该使用colgroup
和col
标签正确显示它:
Merged cell | |
VeryLongWordInThisCell | Cell 2 |
longtextwithoutspace
要么
longtextwithoutspace
以下内容适用于Internet Explorer。 请注意table-layout:fixed
CSS属性的添加
td { border: 1px solid; }
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord |
这对我有用:
并且表的属性是:
table { table-layout: fixed; width: 100% }
style =“ table-layout:fixed; width:98%; word-wrap:break-word”
演示
这对我来说很棒。 我有很长的链接,这将导致该表在Web浏览器上超过100%。 在IE,Chrome,Android和Safari上进行了测试。
如果不需要表格边框,请执行以下操作:
table{ table-layout:fixed; border-collapse:collapse;}td{ word-wrap: break-word;}
更改您的代码
word-wrap: break-word;
至
word-break:break-all;
例
longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content | Short Content |
的HTML
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww |
的CSS
.content{ word-wrap:break-word; /*old browsers*/ overflow-wrap:break-word;}table{ width:100%; /*must be set (to any value)*/}.overflow-wrap-hack{ max-width:1px;}
好处:
word-break:break-all
。 这样做会更好,因为它会先尝试在空格上打断,并且仅在单词大于其容器时才切断单词。 table-layout:fixed
需要table-layout:fixed
。 使用常规的自动调整大小。 width
或max-width
。 如果需要,定义父级的%
。 已在FF57,Chrome62,IE11,Safari11中测试
问题
longtextwithoutspace
是如果文本有一些空格,例如
long text with andthenlongerwithoutspaces
如果单词andthenlongerwithoutspaces
在一行中适合表格单元格,而long text with andthenlongerwithoutspaces
不适合,则长单词将被分成两部分,而不是被long text with andthenlongerwithoutspaces
行。
替代解决方案:在每个第20个字符后的每个长字中插入U + 200B( ),U + 00AD( )或U + 200C( )(但是,请参见下面的警告):
td { border: 1px solid; }
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word | Short word |
警告 :插入其他零长度字符不会影响阅读。 但是,它确实会影响复制到剪贴板的文本(这些字符当然也会被复制)。 如果剪贴板文本稍后在Web应用程序的某些搜索功能中使用,则搜索将被破坏。 尽管可以在某些知名的Web应用程序中看到此解决方案,但请尽可能避免。
警告 :插入其他字符时,请勿在字形内分隔多个代码点。 有关更多信息,请参见 。
如前所述,将文本放在div
几乎可行。 您只需要指定div
的width
,这对于静态布局是幸运的。
这适用于FF 3.6,IE 8,Chrome。
看看
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord | Foo |
这是链接
在IE 8和Chrome 13中进行了测试。
longtexthere | Foo |
这将导致表格适合页面的宽度,而每一列占据该宽度的50%。
如果你喜欢第一列占用更多的页面,添加width: 80%
的td
在下面的例子中,与您所选择的替代率80%。
longtexthere | Foo |
需要做的唯一的事情就是增加宽度与<td>
或<div>
里面的<td>
取决于你想要达到的布局。
例如:
looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word | Foo |
要么
looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word | Foo |
看来您需要设置word-wrap:break-word;
在具有指定(非相对)宽度的块元素( div
)上。 例如:
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word | Foo |
或按照Abhishek Simon的建议使用word-break:break-all
。
与Google Chrome和Firefox一起使用的解决方案(未经Internet Explorer测试)是将display: table-cell
为一个块元素。
我发现了一个似乎可以在Firefox,Google Chrome和Internet Explorer 7-9中运行的解决方案。 用于在一侧放置长文本的两列表格布局。 我到处搜索类似的问题,在一个浏览器中起作用的浏览器破坏了另一个问题,或者在表中添加了更多标签,似乎编码不好。
我没有为此使用表格。 DL DT DD来营救。 至少对于固定两列布局,这基本上是词汇/词典/词义设置。
还有一些通用的样式。
dl { margin-bottom:50px; } dl dt { background:#ccc; color:#fff; float:left; font-weight:bold; margin-right:10px; padding:5px; width:100px; } dl dd { margin:2px 0; padding:5px 0; word-wrap:break-word; margin-left:120px; }
使用浮动的自动换行和左边距,我完全可以得到所需的内容。 只是以为我会与其他人分享这一点,也许它将以两栏定义样式的布局帮助其他人,而使文字难以换行。
我曾尝试在表格单元格中使用自动换行功能,但是它仅在Internet Explorer 9(当然还有Firefox和Google Chrome)中有效,主要是试图在此处修复损坏的Internet Explorer浏览器。
转载地址:http://gldnb.baihongyu.com/