CSS 如何打破表格中的长词?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7284990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:30:00  来源:igfitidea点击:

How to break long words in a table td?

csshtml-tablelong-integerwords

提问by GuyFromOverThere

This is what I have:

这就是我所拥有的:

<td style='width:500px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;'>

<td style='width:500px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;'>

采纳答案by Red

I think this solution will help you!

我认为这个解决方案会对你有所帮助!

pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

http://perishablepress.com/press/2010/06/01/wrapping-content/

http://perishablepress.com/press/2010/06/01/wrapping-content/



// Edit

// 编辑

It's been a long time since this was accepted as the best answer and updates are required. See @benhowdle89's and @Steve's answers below.

自从这被接受为最佳答案并且需要更新以来已经很长时间了。请参阅下面的@benhowdle89 和@Steve 的回答。

So the current browser support is now good enough to use word-breakin order to allow words to be broken over multiple lines.

因此,当前的浏览器支持现在已经足够好,可以使用word-break以允许将单词分成多行。

word-break: break-all

word-break: break-all

http://caniuse.com/#feat=word-break

http://caniuse.com/#feat=word-break

回答by Steve

I used:

我用了:

word-wrap: break-word;
word-break: break-all;
table-layout: fixed;

table-layout: fixedwas the key to making it work.

table-layout: fixed是让它发挥作用的关键。

回答by benhowdle89

word-break: break-word;

This is what you want

这就是你想要的

回答by joshuahedlund

All you need is

所有你需要的是

word-break:break-all

word-break:break-all

This works in Chrome 4+, IE 5.5+, FF 15+, Safari 3.1+, and Opera 15+

这适用于Chrome 4+、IE 5.5+、FF 15+、Safari 3.1+ 和 Opera 15+