是否可以使用 CSS 将字体大小调整为 div 宽度？答案

【问题标题】：Is it possible to adapt font size to div width with CSS?是否可以使用 CSS 将字体大小调整为 div 宽度？
【发布时间】：2016-10-31 13:46:58
【问题描述】：

我有一个宽度为70% 的 div，这就是我想要做的：

在该 div 中添加一些单词
调整字体大小，以便这些词占据所有div宽度

这可能只使用 css 吗？这是我的代码：

.parent {
  width:70%;
  height:auto;
  min-height:100px;
  background:red;
  font-size:10vw;
}

Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
  This Text
</div>

注意：div 大小是响应式的，这很重要。谢谢在前进！

【问题讨论】：

你想根据div中的内容改变字体大小对吧？
是的，我想用我的文本填充 div
你想要 div 的高度是固定的还是变化的？？
stackoverflow.com/questions/10292001/…
很好的问题，如果有人找到答案，或者在未来的浏览器中，calc 函数具有更好的功能，它有很大的潜力它非常有用

标签： html css fonts responsive-design font-size

【解决方案1】：

也许不是你要找的东西，但有些东西 - 你可以使字体和元素都相对于视图宽度。

p {
  font-size: 5vw;
  background-color: red;
  width: 50vw;
}

<p>
  I'm a P!
</p>

【讨论】：

【解决方案2】：

是的，但我认为你需要使用 JS(jQuery)。

JS：

$(function(){

var box = $('.box');
var boxWith = box.width();

$('.box h1').css('font-size',boxWith);

});

https://jsfiddle.net/moongod101/sdfaatp8/

【讨论】：

我想用我的文本填充 div，不改变字体大小与 div 宽度相同，但它的有用代码，谢谢。
你想让文本填满位置 X 的 div 吗？如果可以的话，请制作一张图片告诉我你想要什么，谢谢。
见上图
我不是 JS 专业人士，但我感谢 Stackoverflow 将为您提供帮助 stackoverflow.com/questions/687998/… 抱歉，我无法帮助您。

【解决方案3】：

**You can change font-size:10vh;**
        .parent {
      width:70%;
      height:auto;
      min-height:100px;
      background:red;
      color:white;
      font-size:10vh;
    }
    Please help me to change the font-size dynamically to the parent class
    <hr>
    <div class="parent">
      Text
    </div>

【讨论】：

【解决方案4】：

这里，我更新了....JS Fiddel

尝试使用

css

.parent 
 {
      width:70%;
      height:auto;
      min-height:100px;
      background:red;
      font-size:10vw;          
  }



span{
      display:inline-block;
      transform:scale(1.8,1);
      -webkit-transform:scale(3,1);
 }

HTML

<div class="parent">
  <span>This Text</span>
 </div>

【讨论】：

这行不通，因为 display: inline 的元素无法设置其宽度或高度 - 它总是从它们的内容派生而来。
我的 div 有一个宽度
如果你改变了 div 的宽度，那么你也必须改变 Scale 的 span
你没有回答这个问题，你给出了一个更糟糕的规模属性解决方案。

【解决方案5】：

您只需在代码中添加display: inline;

.parent {
  width: 70%;
  height: auto;
  min-height: 100px;
  background: red;
  font-size: 10vw;
  display: inline;
}

<div class="parent">
  This Text
</div>

【讨论】：

它运行良好，但可能需要改进才能充分发挥作用。