单行文本省略

在 CSS 中，如果你想让单行文本超出一定宽度时自动省略并用省略号（...）表示，可以使用以下样式：

.ellipsis {
    white-space: nowrap;            /* 禁止换行 */
    overflow: hidden;              /* 隐藏超出部分 */
    text-overflow: ellipsis;       /* 超出部分用省略号表示 */
    width: 200px;                  /* 设置宽度，可以根据需要调整 */
}

解释：
1. white-space: nowrap;：禁止文本换行，保持单行显示。
2. overflow: hidden;：隐藏超出容器宽度的文本。
3. text-overflow: ellipsis;：当文本超出容器宽度时，使用省略号（...）表示。
4. width: 200px;：设置容器的宽度，可以根据实际需求调整。

示例：
假设你有一个 div 元素，里面包含一段文本，你可以这样应用样式：

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

通过这种方式，当文本长度超出容器宽度时，超出部分将会被省略号替代。