css - 我如何在一行中显示多行？

Question

我想在 css 中通过 float 在一行中保留 3 个文本但在文本 2 之后，文本 3 显示在下一行。我想在第一行显示文本 3 的一部分。

<style>
.a1{
  float: left;
}
</style>

<div class="a1">/11 11 11 11 11 11 1  1111 1 1  1 1 1 1 1  1 1  1 1 1  1 1  11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1/</div>
<div class="a1">/22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222/</div>
<div class="a1">/33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3/</div>

Answer 1

你不能用 float 或任何 block 级 display 类型的元素来做到这一点，这不是线框模型的工作方式。您需要使用内联元素，例如 span 标签。

span:nth-of-type(2) {
  background: lightgrey;
}

<span class="a1">11 11 11 11 11 11 1  1111 1 1  1 1 1 1 1  1 1  1 1 1  1 1  11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1</span>
<span class="a1">22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222</span>
<span class="a1">33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3</span>

JSfiddle Demo