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

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>