Make font-size responsive based on dynamic amount of characters - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Make font-size responsive based on dynamic amount of characters

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, c</title> 
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Abril+Fatface"> 
  <style>
body {<!--  w w w  . j  av a 2 s  .  c o m-->
   color:Chartreuse;
   font-family:'Abril Fatface';
   line-height:2.3;
}

p {
   margin:0;
   font-size:calc(5vw + 5vh + 3vmin);
}
</style> 
 </head> 
 <body translate="no"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. V</p>  
 </body>
</html>

Related Tutorials