Page Widget How to - Control text overflow and ellipsis

Question

We would like to know how to control text overflow and ellipsis.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.text {<!--from   w  w  w .  j  a  v a2s  .c  om-->
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}
</style>
</head>
<body>
  <div class="box">
    <div class="text">Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Aliquam consectetur venenatis blandit. Praesent
      vehicula, libero non pretium vulputate, lacus arcu facilisis lectus,
      sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis
      euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi,
      accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque
      eleifend lectus in bibendum. Suspendisse lacinia egestas felis a
      volutpat.
      
            Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Aliquam consectetur venenatis blandit. Praesent
      vehicula, libero non pretium vulputate, lacus arcu facilisis lectus,
      sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis
      euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi,
      accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque
      eleifend lectus in bibendum. Suspendisse lacinia egestas felis a
      volutpat.      
      
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: