Detailed Explanation of Text Overflow Handling in CSS (text-overflow, white-space, overflow)

Description
Text overflow handling is a common layout requirement in CSS, especially when displaying single-line or multi-line text within containers of limited width. This topic primarily involves the combined use of three properties: text-overflow, white-space, and overflow.

Core Property Analysis

1. overflow Property

   • Function: Defines how content is handled when it overflows the element's box.
   • Common values:
     • visible: Default value. Content is not clipped and may render outside the element box.
     • hidden: Content is clipped, and overflow content is invisible.
     • scroll: Scrollbars are always shown.
     • auto: Scrollbars are automatically shown when needed.

2. white-space Property

   • Function: Controls how whitespace inside an element is handled.
   • Key values:
     • normal: Default value. Whitespace is collapsed by the browser.
     • nowrap: Forces text to stay on a single line without wrapping.
     • pre: Preserves whitespace characters but allows normal line breaks.

3. text-overflow Property

   • Function: Defines how overflowed text is displayed.
   • Common values:
     • clip: Default value. Text is simply clipped.
     • ellipsis: Displays an ellipsis (...) to represent clipped text.

Single-line Text Overflow Handling

Implementation steps:

1. Set container width: width: 200px;
2. Force text not to wrap: white-space: nowrap;
3. Hide overflow content: overflow: hidden;
4. Add ellipsis: text-overflow: ellipsis;

Complete code example:

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

Multi-line Text Overflow Handling

Method 1: WebKit-specific method (better compatibility)

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit the number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Method 2: Universal method (using pseudo-elements)

.multiline-fallback {
  position: relative;
  line-height: 1.5em;
  max-height: 4.5em; /* line-height × number of lines */
  overflow: hidden;
  padding-right: 1em; /* Make space for the ellipsis */
}

.multiline-fallback::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* Prevent text from showing through */
  padding-left: 5px;
}

Practical Application Scenarios

1. Table Cell Text Truncation

td {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. Title Handling in Responsive Layouts

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

@media (max-width: 768px) {
  .responsive-title {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}

Important Notes

1. Width Constraint is Required: Elements must have an explicit width or max-width set.
2. Block-level Element Limitation: These properties mainly work effectively on block-level elements.
3. Directionality: text-overflow also supports text-overflow: ellipsis leading (ellipsis at the start).
4. Cross-browser Testing: Different browsers have varying levels of support for multi-line text truncation.

Compatibility Considerations

• Single-line text ellipsis: Supported by all modern browsers.
• Multi-line text ellipsis: It is advisable to provide a fallback solution.
• Mobile: The WebKit method works well on iOS and Android.

By rationally combining these three properties, you can effectively handle various text overflow scenarios, enhancing the visual neatness of the page and user experience.