CSS 停止自动换行分割单词
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3775810/
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
Stop word-wrap dividing words
提问by Joshua
body { word-wrap: break-word;}
I've been using that code (above) to fit the text in the bodyinto it's container. However what I don't like about it, is that it breaks up words.
我一直在使用该代码（以上）将文本body放入它的容器中。然而，我不喜欢它的是它分解了单词。
Is there another way where it will not break up words and only line break after or before a word?
有没有另一种方法可以不分解单词而只在单词之后或之前换行？
EDIT: This is for use within a UIWebView.
编辑：这是在UIWebView.
采纳答案by Vinay B R
use white-space: wrap;. If you have set width on the element on which you are setting this it should work.
使用white-space: wrap;. 如果您在设置它的元素上设置了宽度，它应该可以工作。
update -
rendered data in Firefox
更新 - 在 Firefox 中呈现的数据
回答by Ralphonz
May be a bit late but you can add this css to stop word breaks:
可能有点晚了，但你可以添加这个 css 来停止断词：
.element {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
回答by Pramendra Gupta
You can try this...
你可以试试这个...
body{
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
{word-wrap:;} is an IE proprietary property, and not a part of css. firefox's handling is correct. Unfortunately, FF does not support a soft hyphen / . so that's not an option. You could possibly insert a hair or thin space, /? (check me on the numeric entity) and /?, respectively.
{word-wrap:;} 是 IE 专有属性，而不是 css 的一部分。firefox 的处理是正确的。不幸的是，FF 不支持软连字符 / 。所以这不是一个选择。你可以插入一根头发或细小的空格，/? （在数字实体上检查我）和 /?，分别。
Making {overflow: hidden;}would cut the overflow off, and {overflow: auto;}would cause the overflow to enable scrolling.
制作{overflow: hidden;}会切断溢出，而{overflow: auto;}会导致溢出启用滚动。
回答by Dave Sag
In my situation I am trying to ensure words wrap at proper word-breaks within table cells.
在我的情况下，我试图确保单词在表格单元格内的正确断字处换行。
I found I need the following CSS to achieve this.
我发现我需要以下 CSS 来实现这一点。
table {
table-layout:fixed;
}
td {
white-space: wrap;
}
also check that nothing else is changing word-breakto break-wordinstead of normal.
还检查没有其他变化word-break，以break-word代替normal。
回答by Code
Please use nowrap and wrap value didn't come for me. nowrap solved the issue.
请使用 nowrap 并且 wrap 值不适合我。nowrap 解决了这个问题。
Use white-space: nowrap;
回答by sumit dubey
I had the same problem, I solved it using following css:
我遇到了同样的问题，我使用以下 css 解决了它：
.className {
white-space:pre-wrap;
word-break:break-word;
}
回答by sivahari
Use white-space: nowrap;
用 white-space: nowrap;
CSS white-space Property
CSS 空白属性
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
回答by Vaishali Chauhan
Word break issue on Firefox browser. So you can use to prevent word-break:
Firefox 浏览器上的断字问题。所以你可以使用来防止断字：
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
回答by Abishek
I faced a similar problem in my grid structure and I used, word-break: break-word; in my grid and my issue got resolved.
我在我的网格结构中遇到了类似的问题，我使用了 word-break: break-word; 在我的网格中，我的问题得到了解决。
