How to add a readmore button if the length of a text is greater than a value

Question

I am trying to show a read more button if a length of a comment is greater than 80 characters. this is how i check it

<tr repeat.for="m of comments">
<td if.bind="showLess">${m.comment.length < 80 ? m.comment:m.comment.substr(0,80) + " ... "}</td>
</tr>

so if its greater than 80 it shows the "..." but at the end of the dots i wanted to add a button so i tried this

 <td if.bind="showLess">${m.comment.length < 80 ? m.comment:m.comment.substr(0,80) + " ...<button>Read More</button> "}</td>

but then it messes up my html structure and shows it as

how do i structure the html correctly with in ${this function}?

i cant add the button after the $ { } because then it will show up even if the characters are less than 80.

Note: i didnt use ellipsis because i need the character length

Answer 1

Not sure if this will help but I think using character length is not a good idea here is why:

iiiiiiiiiiiiiiiiiiii...

mmmmmmmmmmmmmmmmmmmm...

Both of these lines have 20 characters but the width of the line is drastically different (unless you are using a font which has similar width chars). You can do this with CSS with number of lines with following code:

display: '-webkit-box',
'-webkit-line-clamp': <number of lines>,
'-webkit-box-orient': 'vertical',
overflow: 'hidden',

Replace number of lines with number of lines of text in that particular div.

For more or less you can use a span tag instead of a button, give it position absolute and place it after the text.

Answer 2

in Aurelia if.bind is a conditional for deciding if the tag and its contents should be displayed. So based on what you have written, what you're saying is. 'If showLess is true, then show this tag and its contents'

it seems what you want is 'if the length of this string is more than 80 chars, then truncate it and show an elipses'

I'm out of practice with Aurelia, but you want something similar to this.

 <td>${m.comment.length < 80 ? m.comment : m.comment.substr(0,80)} <a if.bind=`${m.comment.length > 80}` href=# click.delegate="someFunc()">...</a></td>

Truncate the string if it's too long, then show the ellipses if the string is too long. Also, don't use a button if you don't have to, it'll look bad.