README.zh.md · 何平/v-line-clamp

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

克隆/下载

README.zh.md 835 Bytes

提交于 2020-09-01 16:45 . fix bug

### 当单词超过指定的行数时，使用省略号代替超出部分
## 用法

1.安装到你的项目中
~~~~
npm i v-line-clamp
// or
yarn add v-line-clamp
~~~~

2.在main.js入口中添加如下代码
~~~~
import LineClamp from 'v-line-clamp';

Vue.use(LineClamp)
~~~~

3.现在你就可以在vue模板中使用了
~~~~
<!-- By default, an ellipsis appears on one line -->
<div v-line-clamp></div>
<!-- And you can set a few lines to show the ellipsis -->
<div v-line-clamp="3"></div>
~~~~

### 也许你想直接在组件上使用，那么你可以按照下面的方式使用
~~~~
import { lineClamp } from 'v-line-clamp'

.....
    directives: {
        lineClamp
    }
....
~~~~

## 容易出现的问题点

也许你应该将当前指令的容器（div or 其他）设置style 为 display: inline-block or display: block

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

https://gitee.com/hepingxm/v-line-clamp.git

git@gitee.com:hepingxm/v-line-clamp.git

hepingxm

v-line-clamp

master

何平/v-line-clamp

简介

发行版

贡献者

近期动态

何平/v-line-clamp .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

何平/v-line-clamp