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

html css fonts responsive-design font-size
Engkus Kusnadi picture Engkus Kusnadi · Jun 29, 2016 · Viewed 44.1k times · Source

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:

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

Answer

Anthony Astige picture Anthony Astige · Jun 29, 2016

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>

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More
How can I use Google's Roboto font on a website?

I want to use Google's Roboto font on my website and I am following this tutorial: http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 I have downloaded the file which has a folder structure like this: Now I have three questions: I have …

Read More