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

Posted 2023-03-06

【中文标题】是否可以使用 CSS 将字体大小调整为 div 宽度？

【英文标题】：Is it possible to adapt font size to div width with CSS?

【发布时间】：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 的高度是固定的还是变化的？？

***.com/questions/10292001/…

很好的问题，如果有人找到答案，或者在未来的浏览器中，calc 函数具有更好的功能，它有很大的潜力它非常有用

【参考方案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 专业人士，但我感谢 *** 将为您提供帮助 ***.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>

【讨论】：

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