テキストが1行の場合はCSS改行が1行以上の場合は改行なし

Question

シナリオ1ではCSS改行を作成しようとしていますが、シナリオ2では作成しません。どちらの場合もテキストはデータベースから動的に取得されます、私は先験的に最初の文章の長さを知りません。

シナリオ1：

This is the first sentence of a block. 
This is the second sentence of the block, which is wide. 

シナリオ2：

This is the first sentence of the next example that 
breaks. This is the second sentence of the block, which 
is wide. 

は、これが唯一のCSSで可能ですか？私は現在、ウィンドウのサイズ変更で実行しているJSコードを通じてこれを解決していますが、それは遅いです。

編集：これは動的なテキストの長さで機能するはずです。

Answer 1

単に設定文章は最初のシナリオでブロックされたので、同様に2番目のシナリオでは、テキストコンテナの固定の幅を設定する：

.scenario1 { 
 
    width: 100%; 
 
} 
 

 
.scenario1 span { 
 
    display: block; 
 
} 
 

 
.scenario2 { 
 
    width: 400px; 
 
}

<div class="scenario1"><span>This is the first sentence of a block.</span> 
 
<span>This is the second sentence of the block, which is wide.</span></div> 
 
<br /> 
 
<div class="scenario2">This is the first sentence of the next example that breaks. This is the second sentence of the block, which is wide.</div>