CSS 限制字数，超出隐藏

CSS 不能按照中文“字数”精确截断文本，但可以根据元素宽度或行数隐藏溢出内容，并在结尾显示省略号。

单行文本显示省略号

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

<div class="text-ellipsis">
    这是一段很长的文本，超出容器宽度后显示省略号。
</div>

三个关键属性缺一不可：

• overflow: hidden：隐藏超出容器的内容。
• white-space: nowrap：禁止文本自动换行。
• text-overflow: ellipsis：在截断位置显示省略号。

元素还需要具有明确宽度或最大宽度。

多行文本显示省略号

限制为两行：

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

限制三行时，把 -webkit-line-clamp 改为 3。该方案适合现代浏览器中的常见列表和卡片布局。

可以增加标准属性作为渐进增强：

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

Flex 布局中省略号不生效

Flex 子元素的默认最小宽度可能阻止它缩小，需要添加 min-width: 0：

.item {
    display: flex;
}

.item__content {
    min-width: 0;
    flex: 1;
}

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

表格单元格中使用

表格默认会根据内容扩展列宽。可以为表格启用固定布局：

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

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

如果只想限制某一列，可以给对应的 th 或 td 设置宽度。

保留完整内容

省略号只改变显示效果，DOM 中仍保留完整文本。为了让用户查看全部内容，可以设置 title：

<div class="text-ellipsis" title="这里是完整文本">
    这里是完整文本
</div>

对于重要信息，更好的交互方式是提供展开按钮或详情页面，而不是只依赖鼠标悬停。