Adding ... when text is too long in a div with only CSS

Question

I would like to create a tag system . When a text in a div (a tag) is too long, I would truncate it and add "..." in the end. Is there any CSS solution in order to do it?

Answer 1

You can use text-overflow: ellipsis for that. Further information is in the comments of the code.

div {
  width: 10em; /* the element needs a fixed width (in px, em, %, etc) */
  overflow: hidden; /* make sure it hides the content that overflows */
  white-space: nowrap; /* don't break the line */
  text-overflow: ellipsis; /* give the beautiful '...' effect */
}

<div>This is a text that is too long for this div.</div>

Answer 2

Here is your required css.

.tag{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
}

Here

Width can be changed to required size.

white-space will make sure the text is on same line.

overflow:hidden will hide excess content allow text-overflow to add dots.

text-overflow: ellipsis will add dots

Answer 3

Try this:

<div class='truncate'></div>



.truncate {
     width: 250px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
    }