Is it possible to adapt font size to div width with CSS?

Question

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!

you want to change font sise according to the content in the div right? — Naga Sai A, Jun 29 '16 at 03:04
https://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size — Anthony Astige, Jun 29 '16 at 03:34
Nice question this has a lot of potential its very useful if someone finds an answer to it or in future browsers calc function is subjected to better functionalities — codefreaK, Jun 29 '16 at 03:55

score 7 · Answer 1 · edited May 05 '20 at 07:35

7

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;
}

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

edited May 05 '20 at 07:35

Penny Liu

11,885
5
66
81

answered Feb 07 '18 at 20:56

Marina

1,536
1
17
21

It works well but maybe need improvements to work fully. – UserOfStackOverFlow Dec 09 '21 at 18:20

score 5 · Answer 2 · answered Jun 29 '16 at 03:06

5

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>

answered Jun 29 '16 at 03:06

Anthony Astige

1,869
11
17

score 0 · Answer 3 · answered Jun 29 '16 at 03:46

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

score -2 · Answer 4 · edited Aug 12 '17 at 05:54

-2

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/

edited Aug 12 '17 at 05:54

answered Jun 29 '16 at 03:08

Felix Fong

931
1
8
18

I want fill the div with my text, not change the font-size same as div width, but its useful code, thanks. – Engkus Kusnadi Jun 29 '16 at 03:21
Do you want to make the text fill up the div at position X?and if you can please make an image to show me what you want,thanks. – Felix Fong Jun 29 '16 at 03:22
See the image above – Engkus Kusnadi Jun 29 '16 at 03:30
I'm not a JS pro,but i thank this Stackoverflow will help you http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container Sorry i can't help you out. – Felix Fong Jun 29 '16 at 04:07

shivani · Answer 5 · 2016-06-29T09:39:26.230

-3

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>

edited Jun 29 '16 at 09:39

answered Jun 29 '16 at 04:57

shivani

940
1
7
28

This won't work, because elements that are `display: inline` can't have their width or height set - it's always derived from their content. – Ben Hull Jun 29 '16 at 05:28
1

My div has a width – Engkus Kusnadi Jun 29 '16 at 06:03
If you change div width then you also have to change Scale for span too – shivani Jun 30 '16 at 04:13
You are not answering the question and you are giving a worse solution with scale property. – Serginho Feb 03 '17 at 09:49

Is it possible to adapt font size to div width with CSS?

5 Answers5

Linked

Related