divで印刷されたテキストを段落として表示するように表示

Question

DBから取り出され、div内に印刷されたさまざまな文章を表示する際に問題があります。私は段落のように背中合わせに表示するにはこの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のための正常な動作です - それは、ブロックのように振る舞うので、その内容はそれを占有するために利用可能な任意の領域を超えた場合、それは次の行に崩壊します。

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

：それは display: inline

Updated JSFiddle

コードスニペットのデモンストレーションを使用して、意図的にをラップ持って