30

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

4

6 回答 6

34

这对我有用

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

于 2014-10-21T23:15:31.570 回答
14

@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 的解决方案，这对我来说就像一个魅力！

于 2018-04-03T11:42:45.467 回答
12

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

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

于 2013-07-09T00:38:00.497 回答
3

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

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

用法是这样的： 

<full-width-text>Lorem Ipsum</full-width-text>
于 2016-10-29T22:16:28.310 回答
3

我已经使用 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

于 2017-03-07T10:59:00.377 回答
0

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

（我正在使用 SCSS）

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

    &:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
}
于 2021-11-09T18:55:11.993 回答