对齐文本以填充div

Question

我想做的是这样的事情：

1 2 3 4 5
6       7
8 9 10 11

使用此代码：

<div style="text-align: justify;">
1 2 3 4 5
<br>
6 7
<br>
8 9 10 11
</div>

但它不起作用，并显示如下：

1 2 3 4 5
6 7
8 9 10 11

Answer 1

在DTP和文字处理应用程序中，此选项称为“强制对齐”。不幸的是，这不是CSS中的一个选项。

Answer 2

当文本换行到下一行时，Justify仅占用整行。如果你想要它包装你需要一个更窄的div宽度，你需要删除<br />。

你可以从这样的事情开始（不知道如何将7放在与5和11相同的地方）：

<div style="text-align: justify;">
1 2 3 4 5
<br>
<span style="text-align:left;">6</span>
<span style="float:right;">7</span>
<br>
8 9 10 11
</div>

Answer 3

另一个选项虽然对 有点难看。

<强> Live Demo

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 &nbsp; &nbsp; &nbsp; &nbsp; 7 8 9 10 11
</div>

没有nbsp;

的其他选项

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 <span style="width:30px; display:inline-block;"></span> 7 8 9 10 11
</div>

Answer 4

以下是一些可以解决问题的技巧：

<pre><div>1 2 3 4<br/>4     6<br/>7 8 9 0</div></pre>

请参阅演示here