Home » CSS » Show Dots If Text Too Long Using CSS

Show Dots If Text Too Long Using CSS

By

If the text line is longer than the container width and you want to show dots to control the text using CSS, then use the following code:

Display Dots (Ellipsis) at The End of Text Line Using CSS

You can use the CSS text-overflow property with an ellipsis setting. Below is an example:

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

To show the ellipsis for multiple lines, use the following CSS:

.para-class {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}