Html css 自动换行可以包装整个单词而不破坏它们？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23406112/
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
css word wrap that wraps whole word without breaking them?
提问by Eddy
I need to fit a long text to a width of about 300 pixels. I'm using this css:
我需要将长文本调整为大约 300 像素的宽度。我正在使用这个css：
div {
width: 300px;
color:white;
word-wrap:break-word;
}
My issue is with the word-wrap:break-word;. It's breaking words in the middle of the word. But what I need is to have the words stay as they are, and for the document to be smart enough to break the line when appropriate, and keep the words themselves intact.
我的问题是word-wrap:break-word;. 它在单词中间打破单词。但我需要的是让文字保持原样，并使文档足够智能以在适当的时候打破界限，并保持文字本身完整无缺。
Is that possible? I tried every option of word-wrapbut nothing works. Either the paragraphs are not breaking and the text stays off screen, or the words break and a couple of letters are in one line, while other letters are in the following line.
那可能吗？我尝试了所有选项，word-wrap但没有任何效果。要么段落没有中断并且文本保持在屏幕外，要么单词中断并且几个字母在一行中，而其他字母在下一行。
EDIT: adding my code to form a concrete example. My entire styleelement:
编辑：添加我的代码以形成一个具体的例子。我的整个style元素：
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}
div {
width: 300px;
color:white;
font-size:10px;
word-wrap:break-word;
}
pre {white-space:break;}
</style>
Then in the bodyelement:
然后在body元素中：
<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
???? 3 ????? ????? ????? ?????????? ??? ???? ????? ??????? ?????? ?–2.5 ?????? ???, ?????? ?? ??? ????? ?–2.195 ?????? ???? - ??? ?? 12% ??? ????? ?????? ????? ??????. ????????, ???? 4 ????? ????? ???? ???? ????? ?????? ?–1.6 ?????? ??? ?????? ?–40% ???? - 950 ??? ??? ????.
</pre>
</div>
</bdo>
<span class="Apple-converted-space">?</span></p>
</body>
</html>
回答by GolezTrol
You don't need to do anything special. Normally the text will break between words.
你不需要做任何特别的事情。通常，文本会在单词之间中断。
If that doesn't happen, then
如果这没有发生，那么
- either the container is too wide
- the container is explicitly set to not break on spaces at all. For instance if it is a
<pre>element, or has the csswhite-space:pre;orwhite-space:nowrap;. - the text contains non-breaking spaces (
) instead of normal spaces.
- 要么容器太宽
- 容器被明确设置为根本不中断空格。例如，如果它是一个
<pre>元素，或者具有 csswhite-space:pre;或white-space:nowrap;. - 文本包含不间断空格 (
) 而不是普通空格。
Solution: use
解决方法：使用
white-space: pre-wrap;
It will make the element behave like a preelement, except it also wraps when the line is too long. See also:
http://css-tricks.com/almanac/properties/w/whitespace/
它会使元素表现得像一个pre元素，除了当行太长时它也会换行。另见：http:
//css-tricks.com/almanac/properties/w/whitespace/
回答by davidjohnclarke
I was messing about with this. People didn't mention setting the word-break style too. The default word-break rules must wrap the word at the end of the container space, but doesn't keep the word intact.
我在纠结这个。人们也没有提到设置分词样式。默认的分词规则必须将单词包装在容器空间的末尾，但不会保持单词完整。
So the solution to your problem in CSS would be:
因此，您在 CSS 中的问题的解决方案是：
pre{
white-space: pre-wrap;
word-break: keep-all; /*this stops the word breaking*/
}
Edit: I was messing with this further and because I'm using bootstrap, their styling seems to mess with pre tag a lot. Use the !important keyword to override their styling.
编辑：我进一步弄乱了这个，因为我使用的是引导程序，它们的样式似乎与 pre 标签混淆了很多。使用 !important 关键字来覆盖它们的样式。
回答by JAT86
You can wrap the word with a <span>tag and add either white-space: nowrapor display: inline-block.
您可以使用<span>标签将单词包裹起来并添加white-space: nowrap或display: inline-block。
回答by Lux.Capacitor
Note::Make sure your data doesn't read like..
word word wordor browsers other than chrome think its one word
注意：确保您的数据读起来不像 ..
word word word或 chrome 以外的浏览器认为它是一个词
Sounds crazy but a bug in our companys mobile app was doing this and till I checked our API data I thought the internet had broken :p
听起来很疯狂，但我们公司的移动应用程序中的一个错误正在这样做，直到我检查了我们的 API 数据，我才认为互联网已经坏了：p
