CSS可以在元素中的每个单词后强制换行吗？

小编典典

CSS可以在元素中的每个单词后强制换行吗？

css

我正在建立一个多语言站点，所有者正在帮助我进行一些翻译。一些显示的短语需要换行以保持网站的风格。

不幸的是，所有者不是计算机专家，所以如果他看到他foo<br />bar有机会在翻译时以某种方式修改数据。

是否有CSS解决方案（除了更改宽度）适用于在每个单词之后都会中断的元素？

（我知道我可以用PHP做到这一点，但我想知道是否有一个我不知道的CSS技巧可以完成同一件事，也许是在CJK功能中。）

编辑

我将尝试说明发生的情况：

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

长单词会自动中断，短单词不会。我希望它看起来像这样：

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

阅读 325

2020-05-16

共1个答案

小编典典

采用

.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，因为它也支持单词间距）。

2020-05-16