CSS可以在元素中的每个单词后强制换行吗？
我正在建立一个多语种的网站，与所有者帮助我一些翻译。一些显示的短语需要换行符来保持网站的风格。
不幸的是，所有者不是一个计算机爱好者，所以如果他看到foo<br />bar，他就有可能在翻译时以某种方式修改数据。
有没有一种CSS解决方案(除了改变宽度)应用于在每个单词后都会断开的元素？
(我知道我可以在PHP中做到这一点，但我想知道在CSS中是否有我不知道的妙招来完成同样的事情，可能是在CJK特性中。)
编辑
我将尝试用图表说明正在发生的事情：
---------------- ----------------
| Short Word | | Gargantuan |
| | | Word |
---------------- ----------------长词会自动断开，而短词不会。我希望它看起来像这样：
---------------- ----------------
| Short | | Gargantuan |
| Word | | Word |
---------------- ----------------回答 11
Stack Overflow用户
发布于 2012-05-31 17:50:51
使用
.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;
}其中<parent-width>是父元素的宽度(或不适合一行的任意高值)。这样你就可以确定在一个字母之后甚至会有一个换行符。支持Chrome/FF/Opera/IE7+ (甚至可能是IE6，因为它也支持单词间距)。
Stack Overflow用户
发布于 2014-05-27 20:15:27
@HursVanBloob给出的答案只适用于固定宽度的父容器，但在流体宽度容器的情况下会失败。
我尝试了很多属性，但都没有像预期的那样工作。最后，我得出了一个结论:赋予word-spacing 一个非常大的值效果非常好。
p { word-spacing: 9999999px; }或者，对于现代浏览器，您可以使用CSS vw单位(视觉宽度占屏幕尺寸的%)。
p { word-spacing: 100vw; }Stack Overflow用户
发布于 2012-11-03 05:37:11
尝试使用white-space: pre-line;。它在代码中出现换行符的地方创建换行符，但忽略额外的空格(制表符和空格等)。
首先，在代码中将单词写在单独的行中：
<div>Short
Word</div>然后将样式应用于包含单词的元素。
div { white-space: pre-line; }要小心，但是，在元素内部的代码中的每一个换行都会造成换行。因此，编写以下代码将导致在第一个单词之前和最后一个单词之后出现额外的换行符：
<div>
Short
Word
</div>在CSS Tricks上有一篇很棒的文章解释了其他空格属性。
https://stackoverflow.com/questions/4212909
复制相似问题