Html 如何将文本扩展到其容器的宽度？

我有一个div，里面有一些文字，我想把它扩展到div本身

换句话说，单词间距应该自动拉伸，直到最后一个单词到达div的边缘

通过阅读

text align:justify

，我认为这正是它应该做的。但要么我错了，要么我做错了什么：

举例说明：

现在，结果如下：

|text text text text                       |

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

|text        text         text         text|

---

我做错什么了吗？有没有其他方法可以实现这一点？

如果要强制对元素进行对齐，则需要在最后添加一些语义

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

.justify{
文本对齐：对齐；
}
.证明理由：之后{
内容：“；
显示：内联块；
宽度：100%；
身高：0；
线高：0；
}

Lorem ipsum Ullamco labore quis实习ut。

文本对齐：justify

仅适用于除最后一行之外的任何文本行中的内容–由于此处只有一行文本，因此您看不到任何效果

某些浏览器也支持专门用于此类目的的浏览器

但您也可以使用一个小技巧来实现这一点：确保元素的文本内容实际上并不构成最后一行——插入一个占据全部宽度的伪元素，使其被迫位于第二行

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

除了

宽度

，

显示：内联块

是这里的重要部分–如果元素只是

内联

，那么

宽度

将没有效果，如果它是

块

，它将破坏整个内容，因为它首先不会表现为一段虚假的“文本”内容

---

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

这一定是我见过的最奇怪的解决方案lol。不过它很管用，谢谢@DCdaz：嗯，再详细一点有时也会花更多的时间。你真的应该在一个已经有效的答案上改进，而不是猛扑进去。@DCdaz：我没有“猛扑进去”，当我开始键入我的答案时，还没有答案。对不起，我不能评论是否是这样。