Truncating text containing HTML

[rviscomi]

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]

+1 "br" could be considered also

[versak]

+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]

+1 This is such an amazing work!

[rviscomi]

Thanks @apuntovanini.

Open to ideas about implementing this feature.

[ztratar]

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]

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

Interested in seeing the code?

[apuntovanini]

I guess we all are :)

[ztratar]

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]

Hello,

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

`

• Nick Gayeski
• George Pess
• Tim Beechie
• Nick Gayeski
• George Pess
• Tim Beechie
• Nick Gayeski
• George Pess
• Tim Beechie
• George Pess
• Tim Beechie
• Nick Gayeski
• George Pess
• Tim Beechie
• George Pess
• Tim Beechie
• Nick Gayeski
• George Pess
• Tim Beechie

$('.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&lt;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