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

Question

我在显示取自 DB 且每个打印在 div 内的各种句子时遇到问题。我需要这个 div 像在段落中那样背靠背显示。我面临的问题是，如果句子较长，即使上一行有 space ，它也会落到下一行。 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 的预期行为 - 它的行为就像一个块，所以当它的内容超过任何给定的 space 可用空间时，它会折叠到下一行。

要以预期的方式 wrap，请使用 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>

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

Displaying the texts printed in div to show as paragraph

html

css

drupal

drupal-8