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>親要素（または1行に収まらない任意の高い値）の幅です。これにより、1文字の後に改行があることを確認できます。Chrome / FF / Opera / IE7 +で動作します（ワードスペースをサポートしているため、おそらくIE6でも動作します）。

@HursVanBloobの回答は、固定幅の親コンテナーでのみ機能しますが、流動幅コンテナーの場合は失敗します。

多くのプロパティを試しましたが、期待どおりに機能しませんでした。最後にword-spacing、非常に大きな値を指定しても問題なく機能するという結論に達しました。

p { word-spacing: 9999999px; }

または、最近のブラウザーでは、CSS vwユニット（画面サイズの視覚的幅（％））を使用できます。

p { word-spacing: 100vw; }

別の解決策は、要素に適用することにより、行ごとに1つの単語に別の文で説明されdisplay:table-caption;ています

を使用してみてくださいwhite-space: pre-line;。コード内で改行が出現する場所には改行が作成されますが、余分な空白（タブやスペースなど）は無視されます。

まず、コードの別の行に単語を記述します。

<div>Short
Word</div>

次に、単語を含む要素にスタイルを適用します。

div { white-space: pre-line; }

注意してくださいしかし、要素内のコード内のすべての改行は、改行を作成します。したがって、次のように書くと、最初の単語の前と最後の単語の後に余分な改行が生じます。

<div>
    Short
    Word
</div>

他の空白属性を説明するCSSトリックに関する素晴らしい記事があります。

与えられた答えに加えて、さまざまなソリューションから選択できるようにしたい場合...

別の方法は、コンテナの幅を0にして、オーバーフローが確実に表示されるようにすることです。次に、各単語がオーバーフローし、独自の行に配置されます。

div {
  width: 0;
  overflow: visible;
}

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

または、これらの新しく提案されたwidth値の1つを使用することもできます。

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>と、各単語をaでラップしてから、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;

完璧に働いた、それが私のような他のすべての新人を助けることを願っています。