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

Posted 2023-03-06

【中文标题】如何使文本占据其容器的全宽？

【英文标题】：How to make text take full width of it's container?

【发布时间】：2013-07-06 11:09:38

【问题描述】：

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

【问题讨论】：

看这个：***.com/questions/6803016/…...还有这个：***.com/questions/10718840/…。希望这些帖子对您有所帮助！

谢谢，很有帮助。

Force single line of text in element to fill width with CSS的可能重复

【参考方案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

【讨论】：

原文：***.com/questions/21199057/…

我删除了content: "";，但它在不添加新行的情况下仍然有效。

【参考方案2】：

@svas-s-r 结合font-size: *vw 提供的解决方案给了我想要的结果。所以：

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


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

vw 代表viewport width，在本例中为视口宽度的 4.3%。玩弄它以使您的文本适合一行。结合@svas-s-r 的解决方案，这对我来说就像一个魅力！

【讨论】：

感谢vw-hint。只需将text-justify: inter-character; 添加到我的样式中，即可让所有字符跨越整个容器宽度。

【参考方案3】：

您所要求的可能无法完成。 text-align:justify 将使段落文本延伸到右侧，但您无法将标题的大小调整为宽度的 100%。

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

【参考方案4】：

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

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

用法是这样的：

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

【参考方案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

【讨论】：

再次，OP 正在寻找 css 解决方案。

【参考方案6】：

这里没有多余的行问题：只需将 ma​​rgin-bottom 添加到 div

（我正在使用 SCSS）

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

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