CSSを使って好きな位置で改行する

「word-wrap」などを使った禁則処理ではなく、「inline-block」を使ったやり方です。
どちらかというと荒技に近いかも…？

こんなことがしたい時に

具体的な方法

まずは、サンプルテキスト。

色分けのように文章を区切って改行したい。

CSSコード

クラス名は任意。

.line-break {
  display: inline-block;
}

HTMLコード

区切りたい文章ごとに、spanコードで囲む。spanコードには、CSSクラスを指定。

<p><span class="line-break">あのイーハトーヴォのすきとおった風、</span><span class="line-break">夏でも底に冷たさをもつ青いそら、</span><span class="line-break">うつくしい森で飾られたモリーオ市、</span><span class="line-break">郊外のぎらぎらひかる草の波。</span></p>

結果

スマホなど幅が350px以下の状態で見ると、どう改行されているかがわかりやすいです。

色分けされているひとかたまりの文章の幅が画面の幅に収まっている場合は改行されず通常通りに文章が並びます。収まらない場合は、ブロック（文章のかたまり）ごと下に落ちるため、改行されるカラクリです。
そのため、文章の幅がスマホのサイズをオーバーすると途中で改行してしまいます。

そんな時はもう少し、文章の区切りを細かくします。

まとめ

あまり区切り過ぎると、違和感だらけになるので注意(´・ω・`；)
長文よりもTOPページなどの２、３行のキャッチコピーを扱う時などに向いている方法かと思います。