Truncate

Text truncate is a very common pattern in web development. It is used to limit the length of a text to a certain number of characters.

Simple

<div class="truncate">
  This is a very long text that will be truncated..
</div>

However, in many situation, we don't have a fixed width container. We always want to text to use all the available width, then, when hit limit, it truncate.

This is the example:

<div class="container">
  <div class="responsive-truncate">
    This is a very long text that will use all the available width in the container until it reaches the limit.
  </div>
</div>

Let's see a bit more tricky one, that is, we have a list item with the start icon and end button, we want the text between the start icon and the button will truncate when hit limit.

This is the example, the icon and button are fixed width, the text will truncate when hit limit.

<div class="container">
  <div class="list-item">
    <div class="icon">
      🏠
    </div>
    <div class="text">
      This is a very long text that should truncate when the container width is limited while keeping the icon and button visible
    </div>
    <button class="action-button">
      Delete
    </button>
  </div>
  
  <div class="list-item">
    <div class="icon">
      📄
    </div>
    <div class="text">
      Short text that will not be truncated
    </div>
    <button class="action-button">
      Edit
    </button>
  </div>
  
  <div class="list-item">
    <div class="icon">
      🔗
    </div>
    <div class="text">
      Another example with extremely long text content that demonstrates how the truncation works in a flexbox layout with fixed width elements on both sides
    </div>
    <button class="action-button">
      Share
    </button>
  </div>
</div>

<div class="cell">
  <div class="one"></div>
  <div class="two">
  </div>
  <div class="three">
    <div class="four">
      <div class="five"></div>
      <div class="six">
        Lorem ipsum dolor sit amet
      </div>
    </div>
  </div>
</div>

Requirements

For text-overflow: ellipsis to work correctly, certain conditions must be met — otherwise, the ellipsis won’t appear. Here’s the breakdown:

✅ Requirements for Single-Line Truncation

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

What's required:

1. overflow: hidden

Prevents overflow text from spilling out visually.

2. white-space: nowrap

Forces the text to stay on one line; no wrapping.

3. text-overflow: ellipsis

Applies the ellipsis to the clipped content.

4. The element must have a constrained width

Either via width, max-width, flex-basis, or parent container constraints.

width: 200px; /* or some other limit */

✅ Requirements for Multi-Line Truncation

.truncate-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

What's required:

1. display: -webkit-box

Enables multi-line layout in a flex-like column mode.

2. -webkit-box-orient: vertical

Sets the orientation to vertical (required).

3. -webkit-line-clamp: N

Specifies the number of lines to show (e.g., 3).

4. overflow: hidden

Needed to hide clipped lines.

5. The content must actually overflow those N lines

No overflow = no ellipsis.

🚫 Common Mistakes (Why Truncation Fails)

• Missing width or container has no width constraint.
• Using text-overflow: ellipsis without overflow: hidden.
• Using text-overflow on a block with white-space: normal.
• Expecting it to work with display: flex without care (use min-width: 0 or overflow: hidden on flex children).

🔴 Common Failure Cases for text-overflow: ellipsis

1. ❌ No constrained width (auto width)

Problem:

If the element's width is not constrained, the text will never overflow, so the ellipsis won't be triggered.

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="truncate">This is a long sentence that should be truncated.</div>

→ Fails: Because the div grows to fit the content.

✅ Fix:

Apply a fixed width, max-width, or use layout constraints (e.g., flex container).

.truncate {
  width: 200px;
}

4. ❌ Child element is too wide inside a container

Problem

Ellipsis is applied to the outer container, but a child element (e.g. span) expands the width.

<div class="truncate">
  <span style="display: inline-block; width: auto">Too wide span</span>
</div>

✅ Fix:

Force the child element to not grow beyond the container:

span {
  max-width: 100%;
  display: inline-block;
}

Or apply truncation directly to the child instead.

5. ❌ Used in a flex container child without min-width: 0

Refs

http://css-tricks.com/flexbox-truncated-text/