如何使文本占据其容器的全宽？

Question

假设div有300px的宽度,我将如何设置文本的字体大小,以便它总是占用宽度的100%,考虑到文本从不相同的长度(文本是由php生成的一些动态标题).较小的文本必须具有比较大的文本小得多的字体等

Answer 1

这对我有用

div {
  text-align: justify;
}

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

然而,使用这个技巧我必须强制我的元素的高度,以防止它添加一个新的空行.

这是OP并未提出的问题的正确答案。他正在寻找“我将如何设置文本的字体大小，使其始终占据宽度的100％”，而这正是“我将如何在文本的单词之间插入空格的答案”。它总是会占用宽度的100％。” 这个答案会产生* same *大小的间距较差的文本；OP（和我本人）要求“增加”文本的大小，直到填充可用空间为止。 (3认同)

Answer 2

你问的问题可能无法完成.text-align:justify将段落文本扩展到右侧,但不能调整标题的大小,使其宽度为100%.

编辑:嗯,实际上,存在似乎这样做的JS库.http://fittextjs.com.但是,还没有可用的纯CSS解决方案.

Answer 3

@svassr提供的解决方案与之结合，font-size: *vw给了我想要的结果。所以：

div {
  text-align: justify;
  font-size: 4.3vw;
}

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

的vw代表viewport width，在该示例中，视口的宽度的4.3％。试一试，使您的文本适合一行。结合@svassr的解决方案，这对我来说就像一个魅力！

Answer 4

我为此创建了一个网络组件： https:
//github.com/pomber/full-width-text

用法是这样的：

<full-width-text>Lorem Ipsum</full-width-text>