0
179
ViewsHow to add a readmore button if the length of a text is greater than a value
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
1 answers
Answer question0
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).
I suggest you do this with CSS by clipping lines according to your need 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.