如何将文本扩展到与其容器一样宽？

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%;
}

除了 width，display:inline-block 是这里的重要部分——如果元素只是 inline，width 将没有效果，如果它是 block，它会破坏整个事情，因为它首先不会表现为伪造的“文本”内容。

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

How to extend text as wide as its container?