Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Open more actions menu

Repository files navigation

Overflow

A generator that gets the minimum content that corresponds to the height of an element

Installation

npm:

npm install overflowjs --save-dev

Demo

demo

Usage example

<div id="overflow" style="width:280px"></div>

string input

import Overflow from 'overflowjs'
new Overflow(document.querySelector('#overflow'), {
  str:
    'Fame,wealth and knowledge are merely worldly possessions that are withinthe reach of anybodyFame,wealth and knowledge are merely worldly possessions that are withinthe reach of anybodyFame',
  callback: function(res) {
    console.log(res)
    // output:Fame,wealth and knowledge are merely worldly possessions that are withinthe reach of anybodyFame,wealth and knowled
  }
})

you can use it to generate text with overflow

new Overflow(document.querySelector('#overflow'), {
  str:
    "You'll pass the churchyard, Mr Lockwood, on your way back to the Grange, and you'll see the three graverestones close to the moor. Catherine's",
  callback: function(res) {
    console.log(this.dotdotdot())
    // output:You'll pass the churchyard, Mr Lockwood, on your way back to the Grange, and you'll see the three grave...
  }
})

example

Overflow API

options

new Overflow(HTMLElement, {
  str: String,
  row: Number,
  scrollTop: Number,
  callback: function(res) {}
})

method

overflow.reCompute(str,callback)

Recalculate and return the new result,this will save a lot of time than initialization

overflow.dotdotdot(ellipsis = "...", str)

Tips

Overflow used canvas to determine the number of lines to be intercepted

If you pass in HTML, it deletes the nodes one by one to find the last text node that exceeds the height

function dotdotdot just replace last three letter, but you can use dotdotdot.js to do the following or rewrite this function

Performance

The following is an Overflow performance test (in ms)

Development setup

npm install

npm run dev

npm run test

Release History

  • 1.0.17
    • add scrollTop property
  • 1.0.0
    • The first release

Meta

Mater1996 – bxh8640@gmail.com

Distributed under the MIT license. See LICENSE for more information.

LICENSE

Contributing

  1. Fork it (https://github.com/Mater1996/overflow.js)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

About

A generator that gets the minimum content that corresponds to the height of an element

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.