Is it possible to resize the content of a container using only CSS?
In short:
No.
In more detail:
You can adjust the font size in relation to different factors:
- The viewport width (using vw, vh, vmax, and vmin)
- The font size of the element itself (using em or %)
- The font size of the root element (using rem)
It is also possible to scale the font size according to the parent element, but this approach only works if the parent element's size is relative to the viewport.
For example: If the stylesheet contains the following code:
p {
width: 20vw;
font-size: 2vw;
}
The width of the paragraph will always be 20% of the viewport width, and the font size will always be 2% of the viewport width. Therefore, the font size of the paragraph will always be 10% of its width.
Alternatively, you can scale the font size relative to a fixed-width parent element:
For example: If the stylesheet contains the following code:
p {
width: 200px;
font-size: 20px;
}
The font size of the paragraph will always be 10% of its width.
However, there is no unit that allows the font size of a fixed-width element to be inversely proportional to the amount of text it contains.
That being said, you can create a solution using JavaScript:
Here is a quick script that decreases the font size of a div as its textual content increases:
var containers = document.getElementsByClassName('container');
for (var i = 0; i < containers.length; i++) {
var text = containers[i].textContent;
var calculatedFontSize;
switch (true) {
case (text.length < 10) : calculatedFontSize = 50; break;
case (text.length < 20) : calculatedFontSize = 40; break;
case (text.length < 30) : calculatedFontSize = 30; break;
case (text.length < 40) : calculatedFontSize = 24; break;
case (text.length < 50) : calculatedFontSize = 22; break;
case (text.length < 60) : calculatedFontSize = 21; break;
case (text.length < 70) : calculatedFontSize = 20; break;
case (text.length < 80) : calculatedFontSize = 19; break;
case (text.length < 90) : calculatedFontSize = 18; break;
case (text.length < 100) : calculatedFontSize = 17; break;
case (text.length < 110) : calculatedFontSize = 16; break;
case (text.length < 120) : calculatedFontSize = 15; break;
case (text.length < 130) : calculatedFontSize = 14; break;
default : calculatedFontSize = 12; break;
}
containers[i].style.fontSize = calculatedFontSize + 'px';
}
.container {
position: relative;
display: inline-block;
width: 2in;
height: 1in;
margin: 0 6px 6px 0;
background-color: rgb(191,191,191);
vertical-align: top;
}
<div class="container">
Some Text.
</div>
<div class="container">
A little more text.
</div>
<div class="container">
Considerably more text, now something like the size of a sentence.
</div>
<div class="container">
Another container with significantly more content, and so the font should scale down to fit.
</div>
<div class="container">
A fifth container with a very much larger amount of content, which inevitably ends up creating a much longer sentence.
</div>