CSS 可以在元素中的每个单词后强制换行吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4212909/
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
Can CSS force a line break after each word in an element?
提问by Ben
I'm building a multilingual site, with the owner helping me with some translations. Some of the displayed phrases need line breaks to maintain the style of the site.
我正在建立一个多语言网站，所有者帮助我进行一些翻译。一些显示的短语需要换行以保持网站的风格。
Unfortunately, the owner isn't a computer guy, so if he sees foo<br />barthere's the chance he'll modify the data somehow as he's translating.
不幸的是，所有者不是计算机人员，因此如果他看到foo<br />bar有可能在翻译时以某种方式修改数据。
Is there a CSS solution (besides changing the width) to apply to an element which would break after every word?
是否有 CSS 解决方案（除了更改宽度）应用于每个单词后都会中断的元素？
(I know I can do this in PHP, but I'm wondering if there's a nifty trick I don't know about in CSS to accomplish the same thing, perhaps in the CJK features.)
（我知道我可以在 PHP 中做到这一点，但我想知道在 CSS 中是否有一个我不知道的漂亮技巧来完成同样的事情，也许在 CJK 功能中。）
EDIT
编辑
I'll attempt to diagram what's happening:
我将尝试绘制正在发生的事情：
---------------- ----------------
| Short Word | | Gargantuan |
| | | Word |
---------------- ----------------
The long word breaks automatically, the short word doesn't. I want it to look like this:
长字会自动中断，短字不会。我希望它看起来像这样：
---------------- ----------------
| Short | | Gargantuan |
| Word | | Word |
---------------- ----------------
回答by Hurs van Bloob
Use
用
.one-word-per-line {
word-spacing: <parent-width>;
}
.your-classname{
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
}
where <parent-width>is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).
其中<parent-width>是父元素的宽度（或不适合一行的任意高值）。这样您就可以确保在单个字母后甚至有一个换行符。适用于 Chrome/FF/Opera/IE7+（甚至可能适用于 IE6，因为它也支持字间距）。
回答by Deepak Yadav
The answer given by @HursVanBloob works only with fixed width parent container, but fails in case of fluid-width containers.
@HursVanBloob 给出的答案仅适用于固定宽度的父容器，但在流体宽度容器的情况下失败。
I tried a lot of properties, but nothing worked as expected. Finally I came to a conclusion that giving word-spacinga very huge valueworks perfectly fine.
我尝试了很多属性，但没有按预期工作。最后我得出一个结论，给出word-spacing一个非常大的价值非常好。
p { word-spacing: 9999999px; }
or, for the modern browsers you can use the CSS vwunit (visual width in % of the screen size).
或者，对于现代浏览器，您可以使用 CSSvw单位（以屏幕尺寸的百分比表示的视觉宽度）。
p { word-spacing: 100vw; }
回答by malcomio
An alternative solution is described on Separate sentence to one word per line, by applying display:table-caption;to the element
另一种解决方案在将句子分隔为每行一个单词中描述，通过应用display:table-caption;到元素
回答by Nass
Try using white-space: pre-line;. It creates a line-break wherever a line-break appears in the code, but ignores the extra whitespace (tabs and spaces etc.).
尝试使用white-space: pre-line;. 它在代码中出现换行符的任何地方创建一个换行符，但忽略额外的空格（制表符和空格等）。
First, write your words on separate lines in your code:
首先，将您的话写在代码的不同行中：
<div>Short
Word</div>
Then apply the style to the element containing the words.
然后将样式应用到包含单词的元素。
div { white-space: pre-line; }
Be carefulthough, every line break in the code inside the element will create a line break. So writing the following will result in an extra line break before the first word and after the last word:
但是要小心，元素内代码中的每个换行符都会创建一个换行符。因此，编写以下内容将导致在第一个单词之前和最后一个单词之后出现额外的换行符：
<div>
Short
Word
</div>
There's a great article on CSS Tricksexplaining the other white-space attributes.
有一篇关于CSS Tricks的很棒的文章解释了其他空白属性。
回答by Mr Lister
If you want to be able to choose from different solutions, in addition to the given answers...
如果您希望能够从不同的解决方案中进行选择，除了给出的答案...
An alternative method is to give the container a width of 0 and to make sure overflow is visible. Then each word will overflow out of it and will be on its own line.
另一种方法是将容器的宽度设为 0 并确保溢出可见。然后每个单词都会溢出，并在自己的行上。
div {
width: 0;
overflow: visible;
}<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>Or you can use one of those newly proposed widthvalues, provided those still exist by the time you read this.
或者，您可以使用这些新提议的width值之一，前提是在您阅读本文时这些值仍然存在。
div {
width: min-intrinsic; /* old Chrome, Safari */
width: -webkit-min-content; /* less old Chrome, Safari */
width: -moz-min-content; /* current Firefox */
width: min-content; /* current Chrome, Safari; not IE or Edge */
}<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>回答by Mark
You can't target each word in CSS. However, with a bit of jQuery you probably could.
你不能在 CSS 中定位每个单词。但是，使用一些 jQuery 您可能可以。
With jQuery you can wrap each word in a <span>and then CSS set span to display:blockwhich would put it on its own line.
使用 jQuery，您可以将每个单词包装在 a 中<span>，然后使用 CSS 设置 span 将display:block其放在自己的行中。
In theory of course :P
当然理论上：P
回答by eep
I faced the same problem, and none of the options here helped me. Some mail services do not support specified styles. Here is my version, which solved the problem and works everywhere I checked:
我遇到了同样的问题，这里的所有选项都没有帮助我。某些邮件服务不支持指定的样式。这是我的版本，它解决了问题并且在我检查的所有地方都有效：
<table>
<tr>
<td width="1">Gargantuan Word</td>
</tr>
</table>
OR using CSS:
或使用 CSS：
<table>
<tr>
<td style="width:1px">Gargantuan Word</td>
</tr>
</table>
回答by Cosimo wiSe
The best solution is the word-spacingproperty.
最好的解决办法是word-spacing物业。
Add the <p>in a container with a specific size (example 300px) and after you have to add that size as the value in the word-spacing.
添加<p>在容器中具有特定大小（例如300px），你必须是大小添加为字间距值后。
HTML
HTML
<div>
<p>Sentence Here</p>
</div>
CSS
CSS
div {
width: 300px;
}
p {
width: auto;
text-align: center;
word-spacing: 300px;
}
In this way, your sentence will be always broken and set in a column, but the with of the paragraph will be dynamic.
这样，你的句子将永远被打破并设置在一个列中，但段落的搭配将是动态的。
Here an exampleCodepen
这里有一个示例Codepen
回答by Onza
https://jsfiddle.net/bm3Lfcod/1/
https://jsfiddle.net/bm3Lfcod/1/
For those seeking for a solution that works within a flexible parent container with a children that is flexible in both dimensions. eg. navbar buttons.
对于那些寻求在具有两个维度都灵活的子项的灵活父容器中工作的解决方案的人。例如。导航栏按钮。
//the parent (example of what it may be)
div {
display:flex;
width: 100%;
}
//The children
a {
display: inline-block;
}
//text wrapper
span {
display: table-caption;
}
回答by Emanuel Hiroshi
In my case,
就我而言，
word-break: break-all;
worked perfecly, hope it helps any other newcomer like me.
完美地工作，希望它可以帮助像我这样的任何其他新人。
