CSS-Zeilenumbruch, wenn Text eine Zeile ist, aber keine Pause wenn mehr als 1 Zeile

Question

Ich versuche, einen CSS-Zeilenumbruch in Szenario 1, aber nicht in Szenario 2 zu erzeugen. In beiden Fällen wird Text dynamisch aus einer Datenbank bezogen Ich weiß also nicht a priori, wie lange der erste Satz sein wird.

Szenario 1:

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

Szenario 2:

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

Ist dies möglich, mit nur CSS? Ich löse dies derzeit durch JS-Code, der auf der Fenstergröße läuft, aber das ist langsam.

Bearbeiten: Klären Sie, dass dies für dynamische Textlängen funktionieren sollte.

Answer 1

Setzen Sie einfach Sätze im ersten Szenario und stellen eine feste Breite für den Text Container im zweiten Szenario wie so blockiert werden:

.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>