我正在建立一个多语言网站，网站的所有者帮我做一些翻译。一些显示的短语需要换行来保持网站的风格。
不幸的是，所有者不是计算机人员，所以如果他看到foo<br />bar，他就有可能在翻译时以某种方式修改数据。
有没有CSS解决方案(除了改变宽度)应用到一个元素，这将打破每一个字?
(我知道我可以在PHP中做到这一点，但我想知道在CSS中是否有一个我不知道的漂亮的技巧来完成同样的事情，也许在CJK特性中。)
EDIT
我将尝试用图表说明发生了什么:
---------------- ----------------
| Short Word | | Gargantuan |
| | | Word |
---------------- ----------------
长字会自动断掉，短字不会。我想让它看起来像这样:
---------------- ----------------
| Short | | Gargantuan |
| Word | | Word |
---------------- ----------------
如果你想从不同的解决方案中进行选择，除了给出的答案之外……
另一种方法是将容器宽度设置为0，并确保溢出是可见的。然后每一个字就会从里面溢出来，成为自己的一行。
div {
宽度:0;
溢出:可见;
｝
< div >短字< / div >
<人力资源>
< div >庞大的词< / div >
或者您可以使用这些新提出的宽度值之一，前提是在您阅读本文时这些值仍然存在。
div {
宽度:min-intrinsic;/*旧Chrome, Safari */
宽度:-webkit-min-content;/*少旧Chrome, Safari */
宽度:-moz-min-content;/*当前Firefox */
宽度:min-content;/*当前Chrome, Safari;而不是IE或Edge */
｝
< div >短字< / div >
<人力资源>
< div >庞大的词< / div >
<span>是一个内联元素，我添加了一个display: inline-block来给元素max-width: min-content;， min-content是文本/句子中最小单词的值/宽度。
如果使用min-content，“width”将是最长的单词。在这种情况下，例子是你的长单词。但如果你有不同的单词，比如and if或一些2/3字符的单词，那么这些单词将适合在同一行。
如果你想保持文字的行为，你可以给一个固定的宽度，例如5px。
在CodePen中查看更多示例。
.wrapWord {
显示:inline-block;
max-width: min-content;
｝
< div >
< span class = " wrapWord”>
例词
< / span >
< / div >
