使用 text-truncate() 自動依寬度為 String 加上 ... ?

在 如何自動依寬度為 String 加上 … ? 一文中，我們自行建立了 text-ellipsis class 完成需求，事實上 Vuetify 已內建 text-truncate helper class，可直接使用。

Version

macOS Mojave 10.14.5

WebStorm 2019.1.3

Node 12.4.0

Vue 2.6.10

Vuetify 1.5.5

Safari 12.1.1

Safari

我們希望只顯示一行，過長的文字自動加上了 ... 。

Vue File

App.vue

<template>
  <div class="headline text-truncate">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dicta eligendi est ex, quod voluptatibus!
    Accusantium aliquam commodi deleniti dolor facere, ipsam itaque, iure, nulla omnis porro quae repudiandae rerum?
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

第 2 行

<div class="headline text-truncate">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dicta eligendi est ex, quod voluptatibus!
  Accusantium aliquam commodi deleniti dolor facere, ipsam itaque, iure, nulla omnis porro quae repudiandae rerum?
</div>

<div> 內文相當長。

在 <div> 使用了 Vuetify 提供的 headline 與 text-truncate 兩個 helper class。

• headline ：相當於 <h5>
• text-truncate ：自動依寬度為 string 加上 …

CSS

觀察 .text-truncate 會發現也是由 white-space: nowrap 、 overflow: hidden 與 text-overflow: ellipssis 三個 property 所組成，與 如何自動依寬度為 String 加上 … ? 一文所提到原理完全相同。

Conclusion

• 若 CSS Framework 提境供了 helper class，建議直接使用 helper class，較精簡也便於維護，但別忘了觀察其組成 property，畢竟 CSS 才是根本，要知其然也知其所以然