텍스트가 한 줄이면 CSS 줄 바꿈이 있지만 두 줄 이상이면 줄 바꿈이 없음

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

간단하게 설정 문장은 첫 번째 시나리오에서 차단과 같이 두 번째 시나리오에서 텍스트 컨테이너의 고정 폭을 설정할 수 :

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