文字超出展示省略号（css样式）

本文介绍单行文本溢出以及多行文本溢出展示问题

---

前言

在实际开发过程中，为了页面的美观性，我们往往需要省略展示过多的文字，所以就需要用省略号来展示超出的内容。

注意：如果没有显示出效果，检查一下是不是没有设置 width

---

一、单行文本溢出显示省略号

1.css样式

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis; // 文本溢出添加省略号
  white-space: nowrap; // 碰到有边界不要折行
}

2.如何使用

p {
    .text-overflow;
  }

二、多行文本溢出显示省略号

1.css样式

// 默认展示2行
.more-text-overflow(@line: 2) {
  /* stylelint-disable*/
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: @line;
  /* stylelint-disable property-no-unknown */
  -webkit-box-orient: vertical;
}

2.如何使用

p {
    .more-text-overflow(3); // (可展示3行文字)
  }

---

总结

以上就是今天要讲的内容，希望对你有所帮助。