CSS 实现文本超过一定宽度时显示省略号

假设我们有一个div元素，并且我们想要它里面的内容如果太长而不能完全显示在一行内时，在末尾显示一个省略号（…），而不是换行或者直接截断。

div {
    width: 200px;          /* 设置div的宽度为200px */
    white-space: nowrap;   /* 告诉浏览器不要折行 */
    overflow: hidden;      /* 隐藏超出div边界的内容 */
    text-overflow: ellipsis;/* 当内容溢出时，在末尾添加省略号 */
}

为了让省略号正常工作，还需确保div有一个相对定位的父容器，并且该div自身也需要有position: relative;属性。

添加父容器后，完整代码如下：

.parent {
    position: relative;   /* 父容器相对定位 */
    display: inline-block; /* 设置父容器为块级元素 */
}

.child {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;    /* 子元素也需要相对定位 */
}

HTML 示例：

<div class="parent">
    <div class="child">这里是一段非常非常长的文本，它可能会超出分配给它的空间。</div>
</div>

此时你的文本过长，就会被裁剪，并且在末尾会看到一个省略号（…）。

相关文章：

本文标签: