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

【问题标题】：Displaying the texts printed in div to show as paragraph显示在 div 中打印的文本以显示为段落
【发布时间】：2018-05-09 04:00:33
【问题描述】：

我在显示各种句子时遇到问题，这些句子取自 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>

【问题讨论】：

标签： html css drupal drupal-8

【解决方案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>

【讨论】：