DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to make truncate text in CSS
JT Dev for JetThoughts LLC

Posted on • Originally published at jtway.co

How to make truncate text in CSS

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Enter fullscreen mode Exit fullscreen mode

Image description

There is no native CSS property for truncating text. However, you can use the ellipsis character to display truncated text.

p {
  max-width: 800px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Note we have given the element a fixed width. This is made because the element needs a certain width.

Top comments (0)

πŸ€” Did you know?

Β 
🌚 You can turn on dark mode in Settings