嗨~大家好我是Eric，由於今天有要事，所以今天不談 JS ，分享一個很常用到的 CSS 寫法給大家~

<span>
  <img class="logo" :src="systemLogo" />
  <img class="hamburger" src="./img/hamburger.svg" />
  <p class="single-ellipsis">{{ systemName }}</p>
</span>

// 超過一行就 ...
.single-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;

  /* Safari, Opera, and Chrome */
  display: -webkit-box; //必須結合的屬性,用於將對象作為彈性盒模型顯示。
  -webkit-line-clamp: 1; //指定3行省略
  -webkit-box-orient: vertical; //必須結合的屬性 ,設置或檢索彈性盒模型的子元素的排列方式

  /* Firefox */
  display: -moz-box; //必須結合的屬性,用於將對象作為彈性盒模型顯示。
  -moz-line-clamp: 1; //指定1行省略
  -moz-box-orient: vertical; //必須結合的屬性 ,設置或檢索彈性盒模型的子元素的排列方式
}