css 一行展示文本

### 使用 CSS 实现文本单行显示

为了确保文本仅在一行内显示并处理溢出部分，可以通过组合多个 CSS 属性来达成目标。具体来说：

定义一个类 `.single-line` 来控制文本的行为[^3]：

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

这段代码中的 `white-space: nowrap;` 确保了文本不会折行到下一行；而 `overflow: hidden;` 则会隐藏超出容器宽度的内容；最后通过 `text-overflow: ellipsis;` 可以让被截断的文字后面加上省略号表示还有更多内容。

如果还需要限定元素的最大宽度，则可以在上述基础上增加宽度设置[^4]:

.single-line {
    width: 200px; /* 或者 */
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

这样就完成了对单行文本的样式设定，在实际应用时只需将此 class 应用至相应的 HTML 元素即可生效。