DEV Community

Orestis Pantazos
Orestis Pantazos

Posted on • Edited on

2 2

🏷️ Truncate String with Ellipsis in CSS

The front-end developers sometimes need to redesign the screen in order to truncate string with ellipsis in CSS technology. The best possible solution is the following:

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

Top comments (1)

Collapse
 
kvuluong profile image
kvu-luong

I think, it only the best possible solution in case single line, not for multiple lines :))
Something like this one:
"abc
xyz..."

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay