Coder Social home page Coder Social logo

truncate's Introduction

Build Status

Usage

jQuery.truncate(html, options)

> jQuery.truncate('<p>Stuff and <i>Nonsense</i></p>', {
  length: 13
});
'<p>Stuff and <i>No…</i></p>'

$el.truncate(options)

> jQuery('<p>Stuff and <i>Nonsense</i></p>').truncate({
  length: 13
}).html();
'<p>Stuff and <i>No…</i></p>'

Options

Default options are stored on jQuery.truncate.defaults.

length

Default: Infinity

The maximum length (including the ellipsis) of the truncated html.

stripTags

Default: false

If stripTags is truthy all html tags will be stripped, leaving only the text.

> jQuery.truncate('<p>Stuff and <i>Nonsense</i></p>', {
  length: 13,
  stripTags: true
});
'Stuff and No…'

words

Default: false

If words is truthy the input will only be truncated at word boundaries.

> jQuery.truncate('<p>Stuff and <i>Nonsense</i></p>', {
  length: 13,
  words: true
});
'<p>Stuff and…</p>'

keepFirstWord

Default: false

When words and keepFirstWord are both truthy the input will contain at least one word beside the ellipsis even if it's longer than a target length.

> jQuery.truncate('<p>Stuff and <i>Nonsense</i></p>', {
  length: 4,
  words: true,
  keepFirstWord: true
});
'<p>Stuff…</p>'

finishBlock

Default: false

When finishBlock is true it will always truncate the content at the end of the block.

> jQuery.truncate('<p>Stuff and <i>Nonsense</i> and something else</p>', {
  length: 13,
  finishBlock: true,
});
'<p>Stuff and <i>Nonsense…</i></p>'

noBreaks

Default: false

If noBreaks is truthy the input will contain no break elements.

> jQuery.truncate('<p>Stuff and<br><i>Nonsense</i></p>', {
  length: 13,
  noBreaks: true
});
'<p>Stuff and <i>No…</i></p>'

ellipsis

Default: '…'

The ellipsis setting is used to provide a different character for the ellipsis.

> jQuery.truncate('<p>Stuff and <i>Nonsense</i></p>', {
  length: 13,
  ellipsis: '~'
});
'<p>Stuff and <i>No~</i></p>'

truncate's People

Contributors

adarshdch avatar braddunbar avatar flippyhead avatar fredrivett avatar mkazantsev avatar pmettraux avatar rso avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

truncate's Issues

html elements end up in a strange order.

If I use the function as follows:
jQuery.truncate('<div class=\'frog\'><p><blockquote>Long text with tags that will be chopped off but <b>should be added back again</b></blockquote></p></div>', {length:15});

I would expect:
<div class="frog"><p><blockquote>Long text with...</blockquote></p></div>
But instead I get the following:
<div class="frog"><p></p><blockquote>Long text with...</blockquote></div>
Notice that the <p> tags no longer surrounds the <blockquote> element.

Failing unit tests

Currently the tests fail due to an issue with PhantomJS (which is archived / dead now).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.