Text overflow and ellipsis display

Text overflow is a common layout issue in front-end development. When a container's width is insufficient to accommodate all text content, excess text spills beyond the container boundaries. CSS provides multiple ways to handle text overflow, with using ellipsis (...) to represent truncated text being the most common solution.

Basic Manifestation of Text Overflow

When text content exceeds container width, the default behavior is as follows:

.overflow-example {
  width: 200px;
  border: 1px solid #ccc;
  white-space: nowrap; /* Force no line break */
}

In this case, text will directly overflow the container, potentially disrupting page layout. In most modern browsers, horizontal overflow content is visible by default, while vertical overflow depends on the overflow property setting.

Single-Line Text Ellipsis

The most basic text truncation solution is for single-line text with ellipsis:

.single-line {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This solution requires four conditions to be met simultaneously:

1. The element has an explicit width
2. white-space: nowrap is set to prevent line breaks
3. overflow: hidden is set to hide overflow content
4. text-overflow: ellipsis is set to display ellipsis

Multi-Line Text Ellipsis

For multi-line text truncation, CSS provides a more flexible solution:

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit displayed lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

This method is based on WebKit's private properties and is widely supported in modern browsers. Note:

• The -webkit-line-clamp property value determines the number of lines displayed
• The container height should be sufficient to accommodate the specified number of text lines
• May need to adjust line height with the line-height property

Text Truncation in Responsive Design

In responsive layouts, text truncation requires more dynamic handling:

.responsive-truncate {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .responsive-truncate {
    white-space: normal;
    text-overflow: clip;
  }
}

This example shows a responsive solution where text truncation is enabled on small-screen devices while full text is displayed on larger screens.

Text Truncation in Table Cells

Text truncation in table cells requires special handling:

.table-cell {
  display: table-cell;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

For fixed-layout tables, additional settings are needed:

table {
  table-layout: fixed;
  width: 100%;
}

Creative Combination of Pseudo-Elements and Text Truncation

More sophisticated truncation effects can be created with pseudo-elements:

.fancy-truncate {
  position: relative;
  width: 200px;
  height: 60px;
  line-height: 20px;
  overflow: hidden;
}

.fancy-truncate::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 10px;
  background: linear-gradient(to right, transparent, white 50%);
}

This method creates a more natural truncation effect using gradient backgrounds and absolutely positioned pseudo-elements.

Text Direction and Ellipsis

For right-to-left (RTL) text, ellipsis positioning requires special handling:

.rtl-text {
  direction: rtl;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

In some cases, the unicode-bidi property may be needed to correctly handle bidirectional text truncation.

JavaScript-Assisted Text Truncation

When CSS solutions are insufficient, JavaScript can provide more precise control:

function truncateText(element, maxLength) {
  const text = element.textContent;
  if (text.length > maxLength) {
    element.textContent = text.substring(0, maxLength) + '...';
  }
}

// Usage example
const elements = document.querySelectorAll('.js-truncate');
elements.forEach(el => truncateText(el, 100));

This approach is particularly suitable for situations where truncation points need to be determined based on dynamic content.

Accessibility Considerations

When using text truncation, accessibility issues should be considered:

• Ensure truncated text does not affect content comprehension
• Consider providing full text as a title attribute or through other display methods
• Avoid irreversible text truncation for critical content

<div class="truncated" title="Here is the complete text content">
  Here is truncated text...
</div>

Performance Optimization Recommendations

Extensive use of text truncation may impact rendering performance:

• Avoid frequent text truncation calculations in scrolling containers
• For static content, prioritize CSS solutions
• Consider using the will-change property to optimize repaint performance

.optimized-truncate {
  will-change: contents;
  /* Other truncation styles */
}

Browser Compatibility Solutions

For cross-browser compatibility issues, adopt the following strategy:

.cross-browser-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  /* For older Firefox versions */
  display: -moz-box;
  -moz-box-orient: vertical;
  
  /* Standard properties */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  
  /* Final fallback */
  max-height: 1.2em;
  line-height: 1.2em;
}

Real-World Application Scenarios

1. Navigation menu item truncation:

.nav-item {
  padding: 8px 12px;
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. Description text in card components:

.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

3. Long text handling in data tables:

.data-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Advanced Techniques and Considerations

1. Combining with Flexbox layout:

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
  min-width: 0; /* Key property allowing flex items to shrink */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. Dynamic truncation point adjustment:

function dynamicTruncate(element) {
  const originalText = element.textContent;
  let truncated = false;
  
  while (element.scrollWidth > element.clientWidth) {
    element.textContent = element.textContent.slice(0, -1);
    truncated = true;
  }
  
  if (truncated) {
    element.textContent = element.textContent.slice(0, -3) + '...';
    element.dataset.fullText = originalText;
  }
}

3. Interactive solution for displaying full text on hover:

.truncated-with-tooltip {
  /* Standard truncation styles */
  position: relative;
}

.truncated-with-tooltip:hover::after {
  content: attr(data-full-text);
  position: absolute;
  z-index: 100;
  background: #fff;
  border: 1px solid #ddd;
  padding: 5px;
  top: 100%;
  left: 0;
  white-space: normal;
  width: 300px;
}