JarCasting
JarCasting JarCasting

vue-line-clamp

WebJar for vue-line-clamp

Лицензия

Лицензия

MIT
Группа

Группа

org.webjars.npm
Идентификатор

Идентификатор

vue-line-clamp
Последняя версия

Последняя версия

1.2.3
Дата

Дата
Тип

Тип

jar
Описание

Описание

vue-line-clamp
WebJar for vue-line-clamp
Ссылка на сайт

Ссылка на сайт

http://webjars.org
Система контроля версий

Система контроля версий

https://github.com/Frondor/vue-line-clamp

Скачать vue-line-clamp

Имя Файла Размер
vue-line-clamp-1.2.3.pom
vue-line-clamp-1.2.3.jar 8 KB
vue-line-clamp-1.2.3-sources.jar 22 bytes
vue-line-clamp-1.2.3-javadoc.jar 22 bytes
Обзор

Как подключить последнюю версию

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-line-clamp/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-line-clamp</artifactId>
    <version>1.2.3</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/vue-line-clamp/
implementation 'org.webjars.npm:vue-line-clamp:1.2.3'
// https://jarcasting.com/artifacts/org.webjars.npm/vue-line-clamp/
implementation ("org.webjars.npm:vue-line-clamp:1.2.3")
'org.webjars.npm:vue-line-clamp:jar:1.2.3'
<dependency org="org.webjars.npm" name="vue-line-clamp" rev="1.2.3">
  <artifact name="vue-line-clamp" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='vue-line-clamp', version='1.2.3')
)
libraryDependencies += "org.webjars.npm" % "vue-line-clamp" % "1.2.3"
[org.webjars.npm/vue-line-clamp "1.2.3"]

Зависимости

Библиотека не имеет зависимостей. Это самодостаточное приложение, которое не зависит ни от каких других библиотек.

Модули Проекта

Данный проект не имеет модулей.

Vue Line Clamp

npm version npm downloads

A simple, fast and lightweight directive for truncating multi line texts using "cross-browser" CSS strategies.

Demo: https://codepen.io/Frondor/pen/ypvPEQ

Install

npm install --save vue-line-clamp
import Vue       from 'vue'
import lineClamp from 'vue-line-clamp'

Vue.use(lineClamp, {
  // plugin options
})

Usage

<p v-line-clamp:20="2">Some long text that needs to be truncated to a fixed number, which is 2 in this case. And if the browser doesn't support `-webkit-line-clamp`, then a line-height of 20px is going to be used in order to truncate this text, thus calculating its max-height.</p>

NOTE: the argument passed to the directive must be a number, and its used as the line-height value for non-webkit browsers, as part of the fallback method. In some upcoming version it may be able to detect this value automatically.

Plugin options

property type default description
importCss Boolean false Set to true in order to import styles into <head> automatically, element.style is used by default
textOverflow String ellipsis Set the value for text-overflow property in modern browsers
fallbackFunc Function defaultFallbackFunc Provide your own default method to handle the truncation strategy on unsupported browsers. Accepts all directive params: element (Node), bindings (Object), lines (Number)

Caveats

  1. Probably there may be problems when loading custom fonts. I've done some tests and couldn't detect any inconsistence so far, so feel free to open an issue and provide code to reproduce any bug or glitch you find.
  2. The fallback method for older browsers won't show up the ellipsis (...) since we can't control the part of the text node that may get "clamped".

Changelog

v1.2.4 - Implemented textOverflow option.

v1.2.1 - Implemented fallbackFunc options, fixed multiple elements clamping on same page.

v1.2 - Lines parameter passed to v-line-clamp is now reactive.

Версии библиотеки

Версия
1.2.3