对齐文本以填充 div答案

【问题标题】：Justify text to fill a div对齐文本以填充 div
【发布时间】：2011-09-06 12:01:04
【问题描述】：

我想做的是这样的：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

你可以从这样的东西开始（只是不确定如何将 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>

【讨论】：

【解决方案3】：

&nbsp; 的另一个选项虽然有点难看。

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

【讨论】：

【解决方案4】：

这里还有一些技巧可以帮助你找到解决方案：

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

查看演示here

【讨论】：

有时我需要将 8 个字符填充为 9 个字符，然后这不起作用！
我想要一行123456789的填充和abcdefgh一样
这是不可能的，因为文本的对齐是通过改变空格的宽度来完成的。现在事实上，您不能强制将像 123456789 这样的文本对齐到像 abcdefgh 这样的空间拟合中。顺便说一句，你为什么要这样做？有那么重要吗？