how to ellipsis text css?

So your designer has asked you to add the three dots at the end when the text doesn't fit, and you have no clue how to do that?

Don't worry, it's super simple to do with CSS.

By the way, those three dots at the end are called ellipsis.

Real quick - would you like to master CSS and learn Web Development? If so, be sure to check out the platform I recommend to learn coding online:

Use text-overflow: ellipsis; to automatically truncate the text when it overflows the container and add the three dots at the end.

The element needs to get resized and the text has to stay in one line for the ellipsis to show up, so here are all 3 CSS lines you need:

You will soon find, that text-overflow: ellipsis; doesn't work when the text wraps to an extra line.

To truncate multi-line text and add an ellipsis at the end of the last line use the experimental -webkit-box box model (don't worry it's supported in all major browsers):

Control how many lines to show with -webkit-line-clamp. It is important to let the text wrap by setting the white-space property to pre-wrap or normal.

It's trivial to truncate the overflowing text and add an ellipsis at the end of a single line. Adding an ellipsis for multiline text is a bit more tricky, so this post should help you.

You can find the code examples for this article on my GitHub: https://github.com/vincaslt/twitter-code/tree/main/src/ellipsis

Since you're learning CSS tricks, why not go through my practical CSS guide? It will take only 5 minutes, but it will teach you all of the CSS you need in practice:

So how is this done, how can you generate automatic Ellipses? Again this is fairly easy for single-lines.

Single lines you need to set the text-overflow property value to ellipsis.

If your elements wrapping div does not have an explicit height you also need to add white-space: nowrap;,which you are best to use in most use cases anyhow. White-space: nowrap makes sure if the width of you div is too narrow for the length of text that the text does not wrap onto the next line. Here is the code needed to make the H1 in a div show with an ellipsis on a mobile device. I have also set the font size smaller too so this only shows on very few pages but makes sure that the design doesn't break.

Well that was easy

Multi-line is not much more difficult, it is a combination of 3 properties. The solution is a proprietary CSS property that will limit the text of a block container to a given number of lines when used in combination with display: -webkit-box and -webkit-box-orient: vertical;

Even though it is proprietary is has 96% support in browsers according to Can I use.

1 font-size is set to 0.85em in this example as the links are wrapped in an h2. This will be reworked in the coming weeks as the theme is designed around the content. Please see the homepage of this site on mobile or narrow widths.

Support is good for both and as far as I can see useful if you have content that sometimes can be longer than the average. I the case on this site, it would be better practice to make the text smaller for the article titles and this is something I will do when I make some theme modifications in the following weeks.

The first example is the page title in the header, it works okay and it only truncates for small device sizes to the width. Not wanting the header band to take up to much screen I think it works well since it is only a handful of pages.

More "Try it Yourself" examples below.

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow:

Show demo ❯

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix.

CSS tutorial: CSS Text Effects

HTML DOM reference: textOverflow property