div로 인쇄 된 텍스트를 표시하여 단락으로 표시

Question

DB에서 가져온 다양한 문장을 표시 할 때 문제가 있습니다. 각 문장은 div 안에 인쇄됩니다. 나는이 단락이 단락과 같이 뒤에서 보여지기를 필요로한다. 제가 직면하고있는 문제는 문장이 길면 이전 줄에 공백이있을 때도 다음 줄로 넘어갑니다. https://jsfiddle.net/Laz8t8hq/

<div class="paragraph"> 
    <div class="col">It is a long established fact</div> 
    <div class="col">that a reader</div> 
    <div class="col">will be distracted by the readable content of a page </div> 
    <div class="col">when looking at its layout.</div> 
</div> 

Answer 1

이 display: inline-block에 대한 예상 된 동작입니다 - 그 내용이 차지할 사용할 수 주어진 공간을 초과 그래서 블록처럼 동작은, 다음 행으로 축소합니다.

, 그것은 의도 된 방식으로 포장 이 display: inline

Updated JSFiddle

코드 조각 데모 사용하려면

.paragraph { 
 
    width:500px; 
 
} 
 

 
.paragraph .col-inline { 
 
    display:inline; 
 
} 
 

 
.paragraph .col-inline-block { 
 
    display:inline-block; 
 
}

<h3>Before</h3> 
 

 
<div class="paragraph"> 
 
    <div class="col-inline-block">It is a long established fact</div> 
 
    <div class="col-inline-block">that a reader</div> 
 
    <div class="col-inline-block">will be distracted by the readable content of a page </div> 
 
    <div class="col-inline-block">when looking at its layout.</div> 
 
</div> 
 

 
<h3>After</h3> 
 

 
<div class="paragraph"> 
 
    <div class="col-inline">It is a long established fact</div> 
 
    <div class="col-inline">that a reader</div> 
 
    <div class="col-inline">will be distracted by the readable content of a page </div> 
 
    <div class="col-inline">when looking at its layout.</div> 
 
</div>

을