如何将文本扩展到与容器一样宽的范围？

Question

我有一个带有几个文字的div，我想扩展到div本身。

换句话说，字间距应自动延伸，直到最后一个字到达div的边缘。

通过阅读text-align: justify，我认为这正是应该做的。但要么我弄错了，要么我做错了什么：http://jsfiddle.net/rLnrtu0x/1/

举例说明：

现在，结果如下：

|text text text text                       |

但我正在努力实现这样的目标：

|text        text         text         text|

我做错了吗？还有另一种方法可以实现这个目标吗？

Answer 1

如果你想强制一个元素，你需要在最后添加一些语义。

使用伪元素是最简单的方法。请参阅此片段。

.justify {
  text-align: justify;
}
.justify:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  line-height: 0;
}

<div class="justify">
  Lorem ipsum Ullamco labore quis exercitation ut.  
</div>

Answer 2

text-align: justify仅适用于任何文本行但最后一行的内容 - 由于此处只有一行文字，因此您看不到任何效果。

某些浏览器还专门为此目的支持text-align-last。

但是你也可以使用一个小技巧来实现这一点：通过查看元素的文本内容而不是实际构成最后一行 - 通过插入一个伪元素全宽，因此它被迫在第二行。

#justify:after {
    content:"";
    display:inline-block;
    width:100%;
}

http://jsfiddle.net/rLnrtu0x/2/

除width外，display:inline-block是此处的重要部分 - 如果元素只是inline，width将无效，如果是{ {1}}，它会破坏整个事情，因为它首先不会像假文本内容一样。

如果您的目标不仅仅是对齐简单文本，而是对齐实际元素（例如，对于均匀分布的列表项数量），那么您可能还需要查看 flexbox 。