Question

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

在那个div中添加了一些单词
调整字体大小以便那些单词占据所有div宽度

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：div 大小响应，这很重要。提前谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

即可

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  width:70%;
  height:auto;
  min-height:100px;
  background:red;
  font-size:10vw;
  display: inline;
}
</style>
</head>
<body>

<div class="parent">
  This Text
</div>

</body>
</html>

＆＃13;

Answer 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>

Answer 4

是的，但我认为你需要使用JS（jQuery）。

JS：

$(function(){

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

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

});

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

Answer 5

在这里，我更新了它.... 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>

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

5 个答案: