DEV Community

Cover image for Truncate text using CSS ellipsis
Sara Ounissi
Sara Ounissi

Posted on • Originally published at thetrendycoder.com

Truncate text using CSS ellipsis

You might want to truncate a string of text, and you struggle with how to use the property ellipsis.
Here is an example of how you should use it. Note that all the following are mandatory. Your string has to be a straight line (that explains the white-space: nowrap). Its width has to be fixed and the overflow hidden.

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

More details about this property on this article from CSS-Tricks.

Discussion (0)