css设置超出省略号

### 使用 CSS 实现文本溢出时显示省略号

#### 单行文本溢出显示省略号

为了使单行文本在超出容器宽度时自动截断并显示省略号，可以通过设置 `white-space`、`overflow` 和 `text-overflow` 属性来达成这一目的。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px; /* 设置元素宽度 */
    border: 1px solid #ccc; /* 可选，用于展示边框 */
}

对应的HTML结构如下：

<div class="ellipsis">
    这是一个示例文本，用于展示如何使用 CSS 实现文本溢出时显示省略号。
</div>

此配置确保当文本长度超过指定的宽度（此处为200像素）时，在右侧添加省略号表示被隐藏的内容[^1]。

#### 多行文本溢出显示省略号

针对多行文本的情况，则需采用稍微复杂一点的方式处理。一种常见的做法是在Webkit内核浏览器中利用 `-webkit-line-clamp` 属性配合其他样式定义完成该功能。

.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 控制最大显示几行 */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    width: 300px; /* 容器固定宽度 */
    height: auto; /* 高度自适应 */
    line-height: 1.5em; /* 行高设定 */
    max-height: calc(1.5em * 3); /* 计算总高度 */
    border: 1px solid gray; /* 边框可选项 */
}

关联的HTML代码片段应像这样编写：

<div class="multi-line-ellipsis">
    当前这段文字是为了测试多行文本溢出后是否会正常显示出省略号的效果...
</div>

这里的关键在于通过 `-webkit-line-clamp` 来限定最多可见多少行，并结合 `display:-webkit-box` 以及 `line-height` 的计算使得整个布局能够正确响应不同数量的文字输入[^3]。