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

栏目: CSS · 发布时间: 5年前

内容简介:在macOS Mojave 10.14.5WebStorm 2019.1.3

如何自動依寬度為 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

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

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

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

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

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

Conclusion

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

以上所述就是小编给大家介绍的《使用 text-truncate() 自動依寬度為 String 加上 ... ?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

孵化Twitter

孵化Twitter

[美]尼克·比尔顿(Nick Bilton) / 欧常智、张宇、单旖 / 浙江人民出版社 / 2014-1 / 49.90元

一个在挣扎中生存的博客平台Odeo,一小撮龙蛇混杂的无政府主义者员工,经历了怎样的涅槃,摇身一变,成为纽交所最闪耀的上市企业Twitter? 一个野心勃勃的农场小男孩,一个满身纹身的“无名氏“,一个爱开玩笑的外交家,一位害羞而又充满活力的极客,这四位各有特色的创始人如何从兢兢业业、每日劳作的工程师,成为了登上杂志封面、奥普拉秀和每日秀的富裕名人?而在Twitter日益茁壮成长的过程中,他们又......一起来看看 《孵化Twitter》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具