2017-12-26 9 views
-3

시나리오 1에서는 CSS 줄 바꿈을 사용하지만 시나리오 2에서는 사용하지 않습니다. 두 경우 모두 텍스트가 데이터베이스에서 동적으로 제공됩니다 , 그래서 나는 첫 문장이 얼마나 오랫동안 지속될 지 미리 알지 못한다.텍스트가 한 줄이면 CSS 줄 바꿈이 있지만 두 줄 이상이면 줄 바꿈이 없음

시나리오 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 코드를 윈도우 크기에서 실행하여이 문제를 해결하고 있지만 크기가 느립니다.

편집 : 동적 텍스트 길이에서 효과가 있음을 분명히하십시오.

답변

0

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

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

+0

죄송합니다, 언급하는 것을 잊었다 나는 돈 디자인 타임에 문장의 길이를 알지 못한다. 게시물을 업데이트했습니다. 나는 서버 쪽에서 문장을 분리 할 수 ​​있으며 첫 번째 문장을 별도의 범위에 넣을 수 있습니다. –

+0

확실히, 첫 번째 시나리오에서 각 문장 다음에 줄 바꿈을 만들고 싶습니까? 그러나 두 번째 시나리오에서는 각 문장 뒤의 줄 바꿈이 특정 폭 다음에 오는 것을 원하지 않습니다. 내가 맞습니까? –

+0

전체 문장의 첫 번째 문장이 한 줄 이하인 경우 첫 번째 문장 뒤에 줄 바꿈이 필요합니다. 하나 이상의 라인이 필요하다면, 나는 휴식을 원하지 않는다. –