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

你问的问题可能无法完成。 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

我为此创建了一个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变换而不是font-size准备了简单的缩放功能。

博文： 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

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

5 个答案: