前言：

專案背景：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上，我們永遠不可能讓所有的人滿意。但是，我們會讓產品越來越美，符合甚至引導當前使用者的審美，而不是落伍於時代。”