如何实现CSS省略号表达文本溢出

发布时间：2023-05-18

一、理解文本溢出与省略号

在开始探讨如何实现CSS省略号表达文本溢出之前，我们先来理解一下什么是文本溢出和省略号。 文本溢出指的是，当所要显示的文本内容超过了指定容器的宽度时，文本就会溢出容器。这时如果不加处理的话，文本会覆盖到容器之外，影响页面整体布局。 省略号指的是，在文本显示不全的情况下，显示省略号来代替隐藏的内容，从而达到优化页面美观度的效果。

二、使用 text-overflow 属性来实现省略号

CSS3提供了一种实现文本溢出并用省略号来表示的方法——text-overflow 属性。 可以通过设置 text-overflow: ellipsis 来实现文本溢出时省略号的显示。但是，需要注意的是，该属性只有在满足以下3个条件时，才能正常工作：

  1. 元素必须有一个确定的宽度（width）；
  2. 元素必须有一个溢出隐藏（overflow: hidden）或强制换行（word-wrap: break-word）的属性；
  3. 元素必须有一个 white-space 属性，该属性设置为 nowrap 或 pre-wrap。
.text-overflow {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

三、使用 JavaScript 来实现动态省略号

在某些情况下，文本的长度是不确定的，而且固定宽度并不适用。这时，我们可以使用 JavaScript 对文本长度进行计算，然后根据计算结果来动态设置省略号。

function textOverflow(element, maxLength) {
    if (element.innerHTML.length > maxLength) {
        element.innerHTML = element.innerHTML.substring(0, maxLength) + "...";
    }
}
// 使用方法
textOverflow(document.getElementById("example"), 20);

四、结合 CSS 弹性盒子来实现省略号

CSS 弹性盒子提供了灵活的布局方式，可以很方便地实现省略号效果。 可以通过将文字包裹在一个弹性容器内，同时设置 nowrap、overflow: hidden、text-overflow: ellipsis 和弹性盒的一些属性，来实现省略号效果。

.box {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

五、使用 CSS 网格布局来实现省略号

CSS 网格布局也可用于实现省略号效果，其实现方式与弹性盒子类似。只需将文字包裹在一个网格容器内，同时设置 grid-template-columns 等属性即可。

.grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
推荐文章