Question

我在显示从DB中获取的各种句子时遇到问题，每个句子都打印在div中。我需要这个div在段落中背靠背显示。我面临的问题是，如果句子较长，即使上一行中有空格，它也会落到下一行。 https://jsfiddle.net/Laz8t8hq/

{ "_id" : ObjectId("5a1926718d36336a82b88692"), "a" : 1, "b" : 2, "c" : 3 }
{ "_id" : ObjectId("5a19267b8d36336a82b88693"), "a" : 7, "b" : 6, "c" : 5 }
{ "_id" : ObjectId("5a1926838d36336a82b88694"), "a" : 9, "b" : 1, "c" : 5 }
{ "_id" : ObjectId("5a19268b8d36336a82b88695"), "a" : 0, "b" : 10, "c" : 5 }
{ "_id" : ObjectId("5a1926918d36336a82b88696"), "a" : 1, "b" : 10, "c" : 51 }
{ "_id" : ObjectId("5a1926e28d36336a82b88697"), "a" : 5, "b" : 2, "c" : 2 }
{ "_id" : ObjectId("5a1926ea8d36336a82b88698"), "a" : 11, "b" : 21, "c" : 2 }
{ "_id" : ObjectId("5a1926ee8d36336a82b88699"), "a" : 11, "b" : 21, "c" : 28 }
{ "_id" : ObjectId("5a1947718d36336a82b8869a"), "a" : 1, "b" : 3, "c" : 9 }
{ "_id" : ObjectId("5a1947828d36336a82b8869b"), "a" : 1, "b" : 31, "c" : 9 }
{ "_id" : ObjectId("5a1947888d36336a82b8869c"), "a" : 1, "b" : 32, "c" : 9 }
{ "_id" : ObjectId("5a19478c8d36336a82b8869d"), "a" : 1, "b" : 34, "c" : 9 }
{ "_id" : ObjectId("5a1947908d36336a82b8869e"), "a" : 1, "b" : 37, "c" : 9 }
{ "_id" : ObjectId("5a1947948d36336a82b8869f"), "a" : 1, "b" : 39, "c" : 9 }
{ "_id" : ObjectId("5a1947988d36336a82b886a0"), "a" : 1, "b" : 41, "c" : 9 }
{ "_id" : ObjectId("5a1947c38d36336a82b886a1"), "a" : 2, "b" : 0, "c" : 1 }
{ "_id" : ObjectId("5a1947c88d36336a82b886a2"), "a" : 2, "b" : 0, "c" : 2 }
{ "_id" : ObjectId("5a1947cb8d36336a82b886a3"), "a" : 2, "b" : 0, "c" : 3 }
{ "_id" : ObjectId("5a1947cd8d36336a82b886a4"), "a" : 2, "b" : 0, "c" : 4 }
{ "_id" : ObjectId("5a1947d08d36336a82b886a5"), "a" : 2, "b" : 0, "c" : 5 }

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

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

1 个答案: