0
169
ViewsCómo agregar un botón Leer más si la longitud de un texto es mayor que un valor
Estoy tratando de mostrar un botón de leer más si la longitud de un comentario es mayor a 80 caracteres. así es como lo compruebo
<tr repeat.for="m of comments"> <td if.bind="showLess">${m.comment.length < 80 ? m.comment:m.comment.substr(0,80) + " ... "}</td> </tr>entonces, si es mayor a 80, muestra el "..." pero al final de los puntos quería agregar un botón, así que probé esto
<td if.bind="showLess">${m.comment.length < 80 ? m.comment:m.comment.substr(0,80) + " ...<button>Read More</button> "}</td>pero luego estropea mi estructura html y lo muestra como
¿Cómo estructuro el html correctamente con ${esta función}?
No puedo agregar el botón después de $ { } porque aparecerá incluso si los caracteres tienen menos de 80.
Nota: no usé puntos suspensivos porque necesito la longitud del carácter
1 answers
Answer question0
No estoy seguro de si esto ayudará, pero creo que usar la longitud de los caracteres no es una buena idea. Este es el motivo:
iiiiiiiiiiiiiiiiiiiii...
mmmmmmmmmmmmmmmmmmmmmmmm...
Ambas líneas tienen 20 caracteres, pero el ancho de la línea es drásticamente diferente (a menos que esté usando una fuente que tenga caracteres de ancho similar).
Le sugiero que haga esto con CSS recortando líneas según sus necesidades con el siguiente código:
display: '-webkit-box', '-webkit-line-clamp': <number of lines>, '-webkit-box-orient': 'vertical', overflow: 'hidden',Reemplace el número de líneas con el número de líneas de texto en ese div en particular.
Para más o menos, puede usar una etiqueta de intervalo en lugar de un botón, darle una posición absoluta y colocarla después del texto.