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

Question

假设 div 有 300px 的宽度，我将如何设置文本的字体大小，以便它总是占用 100% 的宽度，考虑到文本的长度永远不会相同（文本是一些由 php 生成的动态标题）。较小的文本必须具有比较大的文本小很多的字体，等等

Answer 1

这对我有用

div {
  text-align: justify;
}

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

然而，使用这个技巧我不得不强制我的元素的高度来防止它添加一个新的空行。

我从Force single line of text in element to fill width with CSS 中得到了答案

也可以在这里寻找解释：http ://blog.vjeux.com/2011/css/css-one-line-justify.html

Answer 2

@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 3

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

编辑：嗯，实际上，存在一个似乎可以做到这一点的 JS 库。http://fittextjs.com。尽管如此，仍然没有可用的纯 CSS 解决方案。

Answer 4

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

在此处查看演示：
https ://pomber.github.io/full-width-text/

用法是这样的：

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

Answer 5

我已经使用 css 转换而不是字体大小准备了简单的缩放函数。

博文： https ://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

编码：

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

工作演示： https ://codepen.io/maciejkorsan/pen/BWLryj

Answer 6

无需额外的行问题就可以做到这一点：只需将margin-bottom添加到 div

（我正在使用 SCSS）

div {
    text-align: justify;
    margin-bottom: -1em !important;

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