Back to all snippets
Library/CSS/Truncate Text
cssbeginnertexttypographyutilities

How to implement Truncate Text in Css

Truncate text with ellipsis for single and multiple lines

Quick Answer

For single-line truncation use `overflow: hidden; white-space: nowrap; text-overflow: ellipsis;`. For multi-line use `-webkit-line-clamp`.

Code Snippet

1/* Single line */
2.truncate {
3  white-space: nowrap;
4  overflow: hidden;
5  text-overflow: ellipsis;
6}
7
8/* Multiple lines */
9.truncate-multiline {
10  display: -webkit-box;
11  -webkit-line-clamp: 3;
12  -webkit-box-orient: vertical;
13  overflow: hidden;
14}

What is Truncate Text?

Text truncation prevents long strings from breaking card and list layouts. The single-line version uses white-space, overflow, and text-overflow. The multi-line version uses the -webkit-line-clamp property, which is now supported across all modern browsers despite its vendor-prefix origin.

How It Works

  1. 1`overflow: hidden` hides the text that extends beyond the container.
  2. 2`white-space: nowrap` prevents the text from wrapping onto a new line.
  3. 3`text-overflow: ellipsis` adds the `…` character at the truncation point.
  4. 4For multi-line: `display: -webkit-box` combined with `-webkit-line-clamp: N` limits rendering to N lines.

Common Use Cases

  • Card titles - Clamp article or product titles to two lines
  • Table cells - Prevent long values from stretching column widths
  • Navigation labels - Keep nav items on one line
  • Notification text - Show a preview of a long notification message

Key Benefits

  • Prevents layout breakage from unexpectedly long content
  • Multi-line clamp is now cross-browser without JavaScript
  • Works with any font size and line height
  • Easily controlled with a CSS custom property or utility class

Common Mistakes to Avoid

  • Forgetting to set a fixed width or `max-width` on the container — without it, the element just expands to fit the text.
  • Using `-webkit-line-clamp` without `display: -webkit-box` — the clamp has no effect.
  • Applying truncation to a flex child without `min-width: 0` — flex items default to `min-width: auto` which prevents overflow.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more css examples

Frequently Asked Questions

Is -webkit-line-clamp safe to use in production?

Yes. Despite the vendor prefix, `-webkit-line-clamp` is now part of the CSS Overflow specification and is supported in all modern browsers including Firefox, Chrome, Safari, and Edge.

Related Snippets

css
beginner
Flexbox Centering
Center elements horizontally and vertically with flexbox
layoutflexboxcentering
css
intermediate
Glassmorphism Effect
Create frosted glass effect with backdrop blur
effectsmodernui
css
beginner
Smooth Scrolling
Enable smooth scrolling behavior
scrollbehaviorux

About This Css Code Snippet

This free css code snippet for truncate text is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement truncate text quickly and correctly.

All snippets in the Snippetly library follow css best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses css.

Tags: text, typography, utilities  | Language: css  | Difficulty: beginner  | Category: CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets