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

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

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

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

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

编辑

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

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

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

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

用

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

@HursVanBloob给出的答案仅适用于固定宽度的父容器，但对于流体宽度的容器无效。

我尝试了很多属性，但没有按预期工作。最后，我得出一个结论，即给word-spacing一个非常巨大的价值就可以了。

p { word-spacing: 9999999px; }

或者，对于现代的浏览器，您可以使用CSS vw单位（以屏幕尺寸的百分比表示的可视宽度）。

p { word-spacing: 100vw; }

通过将应用于元素，将替代句描述为每行将一个单词分隔成一个句子display:table-caption;

尝试使用white-space: pre-line;。它会在代码中出现换行符的位置创建换行符，但会忽略多余的空格（制表符和空格等）。

首先，在您的代码的不同行上写下您的单词：

<div>Short
Word</div>

然后将样式应用于包含单词的元素。

div { white-space: pre-line; }

但是请注意，元素内代码中的每个换行符都会创建一个换行符。因此，编写以下内容将导致在第一个单词之前和最后一个单词之后出现额外的换行符：

<div>
    Short
    Word
</div>

在CSS Tricks上有一篇很棒的文章介绍了其他空白属性。

如果您希望能够从不同的解决方案中进行选择，那么除了给出的答案外...

另一种方法是使容器的宽度为0，并确保可见溢出。然后，每个单词将从其中溢出，并排成一行。

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

或者，您可以使用这些新提议的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>

您不能在CSS中定位每个单词。但是，使用jQuery可能可以。

使用jQuery时，您可以将每个单词包装在中<span>，然后将CSS设置跨度设置为单独display:block的行。

理论上当然是：P

https://jsfiddle.net/bm3Lfcod/1/

对于那些寻求在带有两个子代的子代的柔性父代容器中工作的解决方案的人。例如。导航栏按钮。

//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;
}

我遇到了同样的问题，这里没有任何选择可以帮助我。某些邮件服务不支持指定的样式。这是我的版本，它解决了该问题，并且在我检查过的所有地方都可以使用：

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

或使用CSS：

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

最好的解决方案是word-spacing财产。

添加<p>在容器中具有特定大小（例如300px），你必须是大小添加为字间距值后。

的HTML

<div>
 <p>Sentence Here</p>
</div>

的CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

这样，您的句子将始终被打断并设置在列中，但是段落的with将是动态的。

这是 Codepen 示例

就我而言

    word-break: break-all;

努力工作，希望它对像我这样的其他新手有帮助。