CSS 如何在 <td> 内包装没有空格的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3247358/
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
How do I wrap text with no whitespace inside a <td>?
提问by FunLovinCoder
I've used:
我用过：
word-break:break-all;
table-layout:fixed;
and the text wraps in Chrome but not Firefox.
文本在 Chrome 中换行，但在 Firefox 中不换行。
Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.
更新：我决定改变设计，所以它不需要包装；试图解决 CSS 修复/黑客问题被证明太令人沮丧和耗时。
回答by Stirling
Try this, I think this will work for something like "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" will produce
试试这个，我认为这适用于“AAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGG”之类的东西会产生
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
I have taken my example from a couple different websites on Google. I have tested this on ff 5.0, IE 8.0, and Chrome 10.
我从 Google 上的几个不同网站中举出了我的例子。我已经在 ff 5.0、IE 8.0 和 Chrome 10 上对此进行了测试。
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /* Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword">
</td>
</tr>
</table>
回答by BalusC
Use CSS3 word-wrap: break-word;. Works in WebKit based browsers (Safari, Chrome) as well.
使用 CSS3 word-wrap: break-word;。也适用于基于 WebKit 的浏览器（Safari、Chrome）。
Update: I forgot, the element in question must however be either implicitly or explicitly positioned as fixed element or displayed as block element. For table cells (td), use display: inline-block;.
更新：我忘记了，有问题的元素必须隐式或显式定位为固定元素或显示为块元素。对于表格单元格 ( td)，请使用display: inline-block;.
回答by XDM
For an automatic table layout try to style the concerned td combining the attributes max-width and word-wrap.
对于自动表格布局，尝试结合属性 max-width 和 word-wrap 来设置相关 td 的样式。
Eg: <td style="max-width:175px; word-wrap:break-word;"> ... </td>
例如： <td style="max-width:175px; word-wrap:break-word;"> ... </td>
Tested in Firefox 32, Chrome 37 and IE11.
在 Firefox 32、Chrome 37 和 IE11 中测试。
回答by Rahul
Here is advanced version of what OP asked.
这是 OP 要求的高级版本。
Sometimes, what happens is that, our client wants us to give '-' after word break to end of line.
有时，发生的情况是，我们的客户希望我们在换行符后给行尾提供“-”。
Like
喜欢
AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB
break to
打破到
AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB
So, there is new CSS property if supported, usually supported in latest browsers.
因此，如果支持，则有新的 CSS 属性，通常在最新浏览器中支持。
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
I am using this one.
我正在使用这个。
I hope somebody will have demand like this.
我希望有人会有这样的需求。
回答by kingjeffrey
You can manually inject zero width spaces (​) to create break points.
您可以手动注入零宽度空格 () 来创建断点。
回答by Black Frog
Set a column width for the tdtag.
设置td标签的列宽。
回答by Armstrongest
One slightly hackish way of doing this is by processing the text to add space between each letter. Replace spaces with Then use the letter-spacing css attribute to bring the spaces down.
一种稍微有点骇人听闻的方法是处理文本以在每个字母之间添加空格。将空格替换为 然后使用 letter-spacing css 属性将空格缩小。
I know, it's a hack... but if NOTHING else works, it should wrap without problem.
我知道，这是一个黑客......但如果没有其他工作，它应该毫无问题地包装。
回答by dunxd
I think this is a long standing issue in Firefox, that harks back to Mozilla and Netscape. I'll bet you were having the issue with the display of long URLs. I think it is an issue with the rendering engine rather than something you can fix with CSS, without some ugly hacks.
我认为这是 Firefox 中长期存在的问题，这可以追溯到 Mozilla 和 Netscape。我敢打赌，您遇到了显示长 URL 的问题。我认为这是渲染引擎的问题，而不是您可以使用 CSS 修复的问题，而无需进行一些丑陋的黑客攻击。
Makes sense to change the design.
改变设计是有意义的。
This looked hopeful though: http://hacks.mozilla.org/2009/06/word-wrap/
不过这看起来很有希望：http: //hacks.mozilla.org/2009/06/word-wrap/
回答by Jeffrey Roosendaal
I'm using Angular for my project, and managed to solve this with a simple filter:
我在我的项目中使用了 Angular，并设法用一个简单的过滤器解决了这个问题：
Template:
模板：
<td>{{string | wordBreak}}</td>
Filter:
筛选：
app.filter('wordBreak', function() {
return function(string) {
return string.replace(/(.{1})/g, '?');
}
})
You can't see it, but after $1there is an invisible space (thanks @kingjeffrey for the tip), which enabled word breaks for table cells.
你看不到它，但是在$1有一个不可见的空间之后（感谢@kingjeffrey 的提示），它为表格单元格启用了分词。
