Skip to content
On this page

v-ellipsis

介绍

该指令是一个基于 JS 的省略文本的指令

背景

  • 对于多行文本省略,我们通常用 css 处理,代码如下:
css
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

这样会遇到一个问题,就是在非 webkit 的浏览器不起作用。

  • 有用html2canvas去生成海报的同学,肯定会遇到一个问题,就是它不能够转换css的换行。那么这个时候可以用这个指令去解决这个问题

代码示例

基本用法

flex 布局

自定义配置

动态更新内容

v-ellipsis 配置

属性名说明类型必传默认值
content文本内容(只有在需要动态更新的情况下才需要设置该配置,一般情况下会默认取 el.textContent)stringel.textContent
lineClamp文本内容最大显示的行数number1
fillText触发省略后填充的文本的内容string...