微信小程序如何实现 点击查看全部

Question

功能需求，文字只显示两行半，超出部分隐藏，并在文字末尾追加 查看全部 的标签，点击查看全部，则显示全部文字
排除方案：排除 根据文字长度做计算的方案，因为文本可能会有换行符，无法单纯根据字符串的长度做计算

Answer 1

用伪类覆盖一半

.box {
  position: relative;
  line-height: 1.4em;
  /* 几倍高度显示几行 */
  height: 4.2em;
  overflow: hidden;
}
.box::after {
  content: "...";
  position: absolute;
  width: 50vw;
  bottom: 0;
  right: 0;
  background: #fff;
}