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 6 · Answer 1 · answered Jun 29 '16 at 03:06

6

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,919
1
13
18

This is as close as it gets. If your text is static, you can hardcode its width to however many vw's you need to get it just right. If you're dynamically generating text, CSS isn't enough and you need to mix in some JS. – Different55 Jun 11 '23 at 18:02

score 6 · Answer 2 · edited May 05 '20 at 07:35

6

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

15,447
5
79
98

answered Feb 07 '18 at 20:56

Marina

1,682
1
20
25

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

Unless I'm misunderstanding this answer or the question, this is backwards, and doesn't solve the problem - adding `display: inline` to parent div adapts it's size to text, not the other way around. – ja2142 Jul 23 '22 at 21:52

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

969
1
8
21

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

980
1
8
29

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