How To Truncate Text In CSS

Let’s say you have a tiny section on your website with a list of bullet points, but the text is too long. You would like to be able to truncate or cut off the extra characters to prevent the text from wrapping around to the next line. You can apply CSS to prevent your bullet points from wrapping around to the next line. Here’s what you will need to do. Assuming your div is a class called “bullets.”

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

The ellipsis will add three little dots at the end telling your readers the text has been truncated. Simple enough.

One thought on “How To Truncate Text In CSS

Comments are closed.