CSS : Is it possible to adapt font size to div wid

I have a div with 70% width, and here’s what i want to do:

put some words in that div
adapt font size so that those words occupy all div width

Is this possible with only css? Here is my code:

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

Note: the div size is responsive, this is important. Thanks in advance!

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

5条回答

戒情不戒烟

2楼-- · 2019-02-06 00:08

Yes but I think you need to use JS(jQuery).

JS:

$(function(){

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

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

});

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

0人赞添加讨论(0) 举报

老娘就宠你

3楼-- · 2019-02-06 00:10

Perhaps not quite what you're looking for, but something - You can make both the font and the element relative to view width.

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

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

0人赞添加讨论(0) 举报

时光不老，我们不散

4楼-- · 2019-02-06 00:13

You just have to add display: inline; in your code

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

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

0人赞添加讨论(0) 举报

成全新的幸福

5楼-- · 2019-02-06 00:17

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

0人赞添加讨论(0) 举报

倾城　Initia

6楼-- · 2019-02-06 00:19

Here, I Updated it.... JS Fiddel

try to use

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>

0人赞添加讨论(0) 举报

CSS : Is it possible to adapt font size to div wid

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间