Text overflow handling

Text Overflow Handling

Text overflow is a common scenario in front-end development. When container width is insufficient to accommodate all content, appropriate visual processing solutions are needed. CSS3 provides various technical approaches to address text overflow issues in different contexts.

Single-line Text Overflow Ellipsis

The most basic approach is displaying an ellipsis for single-line text overflow, primarily relying on three CSS properties:

.ellipsis {
  white-space: nowrap;      /* Force no line breaks */
  overflow: hidden;         /* Hide overflow content */
  text-overflow: ellipsis;  /* Display ellipsis */
  width: 200px;            /* Requires explicit width */
}

This solution has several key limitations:

1. Must specify an explicit width (fixed value or percentage)
2. Only applicable to single-line text
3. Container cannot be a flex item or grid item (unless min-width: 0 is additionally set)

In practical applications, border interference may occur, in which case padding can be added:

.ellipsis-with-border {
  padding: 0 10px;
  border: 1px solid #ddd;
  /* Other ellipsis properties */
}

Multi-line Text Overflow Ellipsis

For multi-line text, WebKit-based browsers support specific prefix properties:

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;     /* Limit line count */
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4.5em;            /* Line height 1.5em × 3 lines */
}

Important considerations:

• Line height calculations must be accurate to avoid incomplete truncation or excessive whitespace
• Non-WebKit browsers require JavaScript fallback solutions
• When using frameworks like React, pay attention to autoprefixer processing

Handling in Responsive Environments

In responsive layouts, text overflow needs dynamic adaptation:

.responsive-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;         /* Replace fixed width */
}

@media (min-width: 768px) {
  .responsive-ellipsis {
    white-space: normal;   /* Disable ellipsis on larger screens */
  }
}

Processing Techniques in Complex Layouts

Additional handling is required in flex/grid layouts:

.flex-container {
  display: flex;
}

.flex-item {
  min-width: 0;           /* Key property */
  overflow: hidden;
  text-overflow: ellipsis;
}

Special handling for table cells:

table {
  table-layout: fixed;    /* Must be set */
  width: 100%;
}

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

Custom Overflow Indicators

Beyond ellipses, richer visual effects can be created:

.custom-indicator {
  position: relative;
  max-height: 3.6em;
  overflow: hidden;
}

.custom-indicator::after {
  content: "...More";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, white 30%);
  padding-left: 20px;
}

JavaScript Fallback Solutions

When CSS solutions are insufficient, JavaScript can be combined:

function checkTextOverflow(element) {
  return element.scrollWidth > element.clientWidth;
}

// Usage example
const box = document.querySelector('.text-box');
if (checkTextOverflow(box)) {
  box.classList.add('truncated');
}

For dynamic content, ResizeObserver is more efficient:

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const target = entry.target;
    target.dataset.truncated = 
      target.scrollWidth > target.clientWidth;
  });
});

observer.observe(document.querySelector('.dynamic-text'));

International Text Processing

Special considerations for different languages:

:lang(zh) .ellipsis {
  letter-spacing: -0.5px; /* Adjust Chinese character spacing */
}

:lang(ja) .ellipsis {
  word-break: break-all;  /* Japanese character handling */
}

Accessibility Optimization

Ensure screen readers can correctly interpret:

<div aria-label="Complete text content" class="ellipsis">
  Truncated text content...
</div>

Or use JavaScript for dynamic updates:

element.setAttribute('aria-label', fullText);

Performance Considerations

For large-scale text truncation:

• Avoid using -webkit-line-clamp in scrolling containers
• ResizeObserver is more efficient than periodic checks
• For static content, server-side preprocessing is better

Special Character Handling

When dealing with emojis or special symbols:

.emoji-ellipsis {
  unicode-bidi: plaintext; /* Correctly calculate emoji width */
}

Print Media Adaptation

Ensure full content is displayed when printing:

@media print {
  .ellipsis {
    white-space: normal !important;
    overflow: visible !important;
  }
}