Show Dots If Text Too Long Using CSS

Show Dots If Text Too Long Using CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

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;
}