rviscomi/trunk8

Truncating text containing HTML

Opened this issue · 9 comments

rviscomi commented

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

+1
"br" could be considered also

versak commented

+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

+1 This is such an amazing work!

rviscomi commented

Thanks @apuntovanini.

Open to ideas about implementing this feature.

ztratar commented

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

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

Interested in seeing the code?

apuntovanini commented

I guess we all are :)

ztratar commented

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

ztratar@5b258e7

ReemDcAtypon commented

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&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