每日技术总结：setInterval,setTimeout,文本溢出 CSS文本溢出显示省略号

前言：

项目背景：vue,电商，商品详情页

---

1.倒计时，倒计到0秒时停止

  data () {
    return {
      n: 10
    }
  },
  created () {
    let int = setInterval(() => {
      this.n--
    }, 1000)
    let timer = setTimeout(() => {
      clearInterval(int)
    }, this.n * 1000)
  }

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

参考文档：HTML DOM setInterval() 方法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

参考文档：HTML DOM setTimeout() 方法

2.文本限制溢出省略，单行文本限制，多行文本限制等问题

（1）单行文本溢出

.ellipsis{
  overflow: hidden;
  text-overflow:ellipsis; //文本溢出显示省略号
  white-space:nowrap; //文本不会换行（单行文本溢出）
  width:130px; // 固定宽度
}

（2）多行文本溢出

.mult_line_ellipsis{
  overflow: hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width:130px;
}

参考文章： CSS文本溢出显示省略号

结尾附上一段张小龙说的话：

“产品需要适应这个时代，而不是说我们的用户抱怨，就不去改变它了。尤其是UI上，我们永远不可能让所有的人满意。但是，我们会让产品越来越美，符合甚至引导当前用户的审美，而不是落伍于时代。”