With CSS, use "..." for overflowed block of multi-lines - HTML CSS CSS Property

HTML CSS examples for CSS Property:overflow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. overflow

Description

With CSS, use "..." for overflowed block of multi-lines

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, consectet</title> 
  <style>
@import url(https://www.java2s.com/style/demo/InternetExplorer.png);
* {<!--  w ww .  j av a2  s.  c o m-->
   margin:0;
   padding:0;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

body {
   padding:4em 3em;
   font-family:'Open Sans', Arial, sans-serif;
   color:Chartreuse;
   background:yellow;
}

h2 {
   display:block;
   display:-webkit-box;
   max-width:401px;
   height:110.3px;
   margin:0 auto;
   font-size:27px;
   line-height:2.5;
   -webkit-line-clamp:4;
   -webkit-box-orient:vertical;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style> 
 </head> 
 <body translate="no"> 
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliq</h2>  
 </body>
</html>

Related Tutorials