Pure CSS to make font-size responsive based on dynamic amount of characters
Note: This solution changes based on viewport size and not the amount of content
I just found out that this is possible using VW units. They're the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:
p {
font-size: 30px;
font-size: 3.5vw;
}
http://css-tricks.com/viewport-sized-typography/
and
https://medium.com/design-ux/66bddb327bb1
Adjusting font size dynamically with CSS
as taken from this SO answer, you can set font size to respond to the viewport width.
p {
font-size: 30px;
font-size: 3.5vw;
}
More information can be found at CSS Tricks.
Related Topics
Is There a "Previous Sibling" Selector
Align Inline-Block Divs to Top of Container Element
Transitions on the CSS Display Property
How to Transition Height: 0; to Height: Auto; Using Css
How to Disable Text Selection Highlighting
How to Remove Focus Border (Outline) Around Text/Input Boxes - Chrome
Reset/Remove CSS Styles For Element Only
Css Display: Inline VS Inline-Block
Border Gradient With Border Radius
Align Child Elements of Different Blocks
What Are the Differences Between Flex-Basis and Width
I Do Not Want to Inherit the Child Opacity from the Parent in Css
Bootstrap Align Navbar Items to the Right
What Does the CSS Rule "Clear: Both" Do
How to Combine a Background-Image and Css3 Gradient on the Same Element
Is Embedding Background Image Data into CSS as Base64 Good or Bad Practice