點燈坊

學而時習之,不亦悅乎

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

Sam Xiao's Avatar 2019-06-28

為了使文字自動依寬度自動加上 ...,雖然可自行使用 CSS 實現,事實上 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

truncate000

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

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 提供的 headlinetext-truncate 兩個 helper class。

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

CSS

truncate001

觀察 .text-truncate 會發現也是由 white-space: nowrapoverflow: hiddentext-overflow: ellipssis 三個 property 所組成。

Conclusion

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

Reference

Vuetify, Text wrapping