Truncate Text with CSS Ellipsis

CSS cannot truncate text by an exact number of Chinese characters, but it can hide content according to an element's width or number of lines.

Single-line ellipsis

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

The element must have a constrained width. All three overflow-related properties are required.

Multi-line ellipsis

.text-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Change the clamp value to control the maximum number of visible lines.

Flexbox layouts

A flex child may refuse to shrink because its default minimum width is based on its content. Add min-width: 0:

.item { display: flex; }
.item__content { min-width: 0; flex: 1; }
.item__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Table cells

.data-table {
  width: 100%;
  table-layout: fixed;
}
.data-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Ellipsis changes only the visual presentation; the complete value remains in the DOM. For important information, provide an expand action, details page, or accessible full-text alternative.