显示在div中打印的文本显示为段落

我在显示从DB获取的各个句子时出现问题，并且每个句子都在div内打印。我需要这个div，像段落一样背对背。我面临的问题是，如果句子更长，即使上一行有空格，它也会落在下一行。 https://jsfiddle.net/Laz8t8hq/显示在div中打印的文本显示为段落

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

来源

2017-11-25 Farhan Erooth

这是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>

来源

2017-11-25 10:59:01 UncaughtTypeError

显示在div中打印的文本显示为段落

回答

相关问题