如何在 div 容器中拉伸单个单词？ [复制]

Question

我想在 div 容器中拉伸一个 单个单词。

例如，div 中的这个词

应该这样拉伸：

我找到的解决方案是将每个字母包装在一个 span 标签内，将它们视为弹性项目，然后简单地应用 justify-content: space-between：

HTML

<div>
  <span>W</span><span>O</span><span>R</span><span>D</span>
</div>

CSS

div {
  font-size: 32px;
  width: 50%;
  background-color: #89CFF0;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

这可行，但是，我不希望将每个字母都包含在标签中。

问题： 有没有办法在容器中 stretch 一个单词，而不用将每个字母包装在标签中并且不使用 jQuery？此外，使用JS将字母包裹在标签内也是我想避免的一个选项，因为它与上面的解决方案基本相同。

例如，只要在这样的 div 中放置一个单词，就可以将其拉伸到容器的宽度上

<div>
  WORD
</div>

我想知道是否有办法仅使用 CSS 或/和 vanilla JS 来解决此问题。

Answer 1

不幸的是，看起来很有前途的 text-justify 尚未在大多数浏览器上完全实现（并且可能不会）。

然而，大多数浏览器都支持 text-align ，并且许多主要浏览器都支持 text-align-last ，它告诉浏览器即使最后一行很短也要对齐最后一行。但遗憾的是 Safari 不是这样，所以我们引入了一些技巧 - 通过添加伪元素来强制它看起来全宽。

我看不出用这种方式只用一个单词来证明，但你可以在每个字符之间放置空格，从而避免需要额外的元素：

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  text-align: justify;
  text-align-last: justify;
}
div::after{ /* hack added for Safari */
   content: "";
   display: inline-block;
   width: 100%;
}

<div>W O R D </div>