文本省略号

单行文本省略号

如果文本在单行显示时超出容器宽度，可以使用css的text-overflow属性

.ellipsis {
  white-space: nowrap;         /* 防止换行 */
  overflow: hidden;            /* 隐藏超出内容 */
  text-overflow: ellipsis;     /* 显示省略号 */
  width: 200px;                /* 设置容器宽度 */
}

多行文本省略号

对于多行文本，可以使用 -webkit-line-clamp 和 display: -webkit-box，但这种方法只适用于 WebKit 浏览器（例如 Chrome 和 Safari）

.multiline-ellipsis {
  display: -webkit-box;        /* 将容器设为 flex 布局 */
  -webkit-box-orient: vertical; /* 垂直布局方向 */
  -webkit-line-clamp: 3;       /* 显示的行数 */
  overflow: hidden;            /* 隐藏超出内容 */
}

JavaScript实现

如果需要更灵活的控制，或者在不支持 CSS line-clamp 的浏览器中实现多行省略号，可以使用 JavaScript 截取文本

function truncateText(element, maxLength) {
  if (element.innerText.length > maxLength) {
    element.innerText = element.innerText.slice(0, maxLength) + '...';
  }
}

const element = document.querySelector('.js-ellipsis');
truncateText(element, 50);