Ellipsed: JavaScript library for multiline text ellipsis.

综合技术 Github (源链)

ellipsed

What is Ellipsed?

Ellipsed is a JavaScript library for generating multi-lined ellipsed text.

Indicating the number of visible lines, it will truncate the text at the correct position in targeted elements.

Demo

You can see the demo here: https://nzambello.github.io/ellipsed/

The example/ directory of this repo contains the demo showed above. To start it on your local machine, clone the repository and install it by following the installation instructions below, then start it with npm start (or with yarn start ).

Install

# Yarn
yarn add ellipsed

# NPM
npm install --save ellipsed

# Bower
bower install ellipsed

Usage

Call the ellipsis method with three parameters:

ellipsis(selector, rows, options);
  • selector – A CSS selector string used to target the element for truncation
  • rows – An integer value used as the number of rows that should be visible, following words will be trucated with the replaceStr (default is '...' ).
  • options – Allows an options object to be passed to further customise the functionality. See options section below for details.

Options

Options can be passed through the method using the third parameter, which provides greater control.

NameTypeDefaultDescription
replaceStrstring '...'The string that substituted following the trucated string.
responsiveboolean falseIf true, the method is re-called on resize event, so the number of rows is preserved.
debounceDelayinteger 250 If responsive option is set, it’s the delay value for resizing events debouncing.

Import

Ellipsed is provided as a UMD module.

You can use it as a ES6 module:

import { ellipsis } from 'ellipsed';

As a CommonJS module:

var { ellipsis } = require('ellipsed');

As an AMD module:

require([
  'ellipsed'
], function(ellipsed) {
  var ellipsis = ellipsed.ellipsis;
});

Or as a global module in the browser:

var ellipsis = window.ellipsed.ellipsis;

Browser support

The library has been tested on:

  • Google Chrome 60+
  • Firefox 55+
  • Safari 10+
  • Edge 14+
  • IE 9+

Contributing

New contributors are warmly welcome, see the CONTRIBUTING.md file for other information.

您可能感兴趣的

React.js 前端开发预备知识 React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。 以声明式编写UI,可以让你的代码更加可靠,且方便调试。###组件化 创建好拥有各自状态的组件,再由组件构成更加复杂的界面。 无需再用模...
Publish/Subscribe UMD package Publish/Subscribe https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fpublish.twitter.com%2F&ref_src=twsrc%5Etfw&text=Publish%...
Bower is dead, long live npm. And Yarn. And webpac... Bower is no longer the dependency manager of choice for front-end projects. While the open source project is still maintained, its creators decid...
Ellipsed: JavaScript library for multiline text el... ellipsed What is Ellipsed? Ellipsed is a JavaScript library for generating multi-lined ellipsed text. Indicating the number of visible lines, it...
Npm vs Yarn 之备忘详单 有则笑话,如此讲到:“老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成。我嘴一抽,来了句:人和动物最大的区别就是人会使用工具。……”。撇开这样特例场景,这句话还是非常用有道理的;毕竟从远古石器时期或更早,到如今,所言之语,所穿之衣...
Github责编内容来自:Github (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Ellipsed: JavaScript library for multiline text ellipsis.



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录