显示在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>
答
这是display: inline-block
预期行为 - 它就像一个部分,所以当其含量超过可用于它占用任何给定的空间,它缩短到下一行。
有它在预期的方式包裹,使用display: inline
代码段演示:
.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>