Limit text with CSS

Here is a couple of ways to truncate text using CSS.

.container {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

This with limit the text at 4 lines and will add … at the end.

p {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  width: fit-content;
  white-space: nowrap;
}

This will limit the text to the width of 100% as 1 line

ellipses

Related posts