Slice Your Text Cleanly with These CSS Hacks

#css #tutorial #ui

Text overflows ruin your clean design. Too much content spills out, cluttering your layout.

It’s messy, unprofessional, and buries my design’s vibe. But there’s a way to tame it with clean CSS tricks.

Quick Fix: Single-Line Truncation

A single line of CSS can clip text cleanly. This is my go-to for tight headers or captions.
Here’s the code to make it happen:

.single-line-truncate {
  width: 300px; /* Fixed width for the example */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="single-line-truncate">
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
</div>

It slices text neatly with dots. It keeps text from wrapping or overflowing. It only works for single lines, leaving multi-line text messy.

Next Level: Line-Clamp for Multi-Line

When I need multi-line control, this WebKit trick shines. WebKit’s line-clamp property handles multi-line text elegantly.

Here’s how to level up:

.multi-line-truncate {
  width: 300px; /* Fixed width for the example */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="multi-line-truncate">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
</div>

The -webkit-line-clamp property caps text at a set line count.
Catch: It’s WebKit-only, so test older browsers (you got this, right? 😄).

Backup for Browsers Lacking WebKit Support

When browsers don’t handle WebKit properties, use max-height to mimic truncation. Here’s the setup:

.fallback-truncate {
  width: 300px; /* Fixed width for the example */
  max-height: 4.5em; /* 3 lines * 1.5em (line height) */
  line-height: 1.5em;
  overflow: hidden;
}

<div class="fallback-truncate">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
</div>

Max-height limits text to a set number of lines by multiplying line-height by the desired line count. The ellipsis won’t appear, but the text cuts off cleanly.