limit lines and end paragraph with … using CSS

8/18/2022, 4:52:34 PM

by Leo Voon

Method 1: Use ellipsis.

div { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

It is good to adjust text width to fit according to the container .

Method 2: -webkit technique

div {
  --max-lines: 3;

  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--max-lines); 

}