Truncating text containing HTML

rviscomi / trunk8

jQuery Truncation Plugin -- THIS PROJECT IS NO LONGER MAINTAINED

MIT License

703 stars 95 forks source link

Truncating text containing HTML #5

Open rviscomi opened 12 years ago

rviscomi commented 12 years ago

Ideally, if an element contains HTML, only its visible text should be truncated. The HTML code itself shouldn't be considered part of the text to truncate.

Example:

/* <span class="too-long">This sentence is <b>too long</b>!</span> */

$('.too-long').trunk8({width: 20}); // This sentence is <b>too</b>...

// WRONG:
// This sentence is <b>...

The only text liable to be truncated should be "This sentence is too long!". If the cut is made in between the bold tags, the appropriate text should still appear bold.

touhonoob commented 12 years ago

+1 "br" could be considered also

versak commented 11 years ago

+1 would love to see this working. i'm using it in conjunction with tinyMCE and once the formatted text is displayed, the first line reads (after trunk8ing):

> [..more]

where the greater than symbol is left over from the html and the [...more] is my assigned "fill".

thanks in advance

apuntovanini commented 11 years ago

+1 This is such an amazing work!

rviscomi commented 11 years ago

Thanks @apuntovanini.

Open to ideas about implementing this feature.

ztratar commented 11 years ago

This definitely needs to be included. I want to use trunk8 on markdown supported display text, but if users include links or line breaks I'm totally screwed.

ztratar commented 11 years ago

Hey @rviscomi -- using Trunk8 for my company and implemented changes to make it work with HTML.

Interested in seeing the code?

apuntovanini commented 11 years ago

I guess we all are :)

ztratar commented 11 years ago

If interested. I'm sure the code could be optimized, and I'm completely open to that.

https://github.com/ztratar/trunk8/commit/5b258e7980bc6508dd45cddf591c78fa8030fb7b

ReemDcAtypon commented 7 years ago

Hello,

im using truck8 to trim a list of lis to tow lines, the code bellow

$('.loa').trunk8({ lines: 2, fill: '... See all Authors' });

$(document).on('click', '.trunck-read-more', function (event) {
    $(this).closest('.loa').trunk8('revert').append('<a class="trunck-read-less" href="#" title="See less Authors">... See less Authors <i class="icon-section_arrow_u"></i></a>');

    return false;
});

$(document).on('click', '.trunck-read-less', function (event) {
    $(this).closest('.loa').trunk8();

    return false;
});

what i got is

<li><a href="/author/search/url?q=George Pess<a class=" trunck-read-more"="" title="See all Authors">... See all Authors<i class="icon-section_arrow_d"></i></a></li>

any idea how can i fix this issue

Thanks :D