En el proceso de desarrollo front-end, si el texto excede una o dos líneas y la parte sobrante muestra puntos suspensivos, es relativamente simple de implementar usando CSS, sin embargo, si desea lograr un texto que exceda una línea y media o dos líneas y media y la parte sobrante muestra elipses, no se puede lograr usando CSS, pero se puede hacer usando javascript . como sigue:
parte html:
estilo:
parte js:
El método jsLine (línea, nombre de clase) se ha encapsulado aquí y se puede usar directamente. El parámetro de línea es el número de líneas para controlar la visualización del texto. Una línea y media es 1,5, dos líneas y media es 2,5 y nombre de clase es el nombre de la clase de texto a controlar. Recuerde utilizar selectores de clases.
Principio de implementación:
use ancho de texto/tamaño de texto = cuántos caracteres hay en una línea y luego cuántos caracteres hay en una línea * número de líneas que deben controlarse = número de caracteres que deben mostrarse. Una vez que tenga el número de caracteres que deben mostrarse, el resto es simple. Use substr() simplemente interceptelo.
Habrá un problema aquí. Si el atributo de tamaño de fuente del texto actual no está configurado, dom[0].style.fontSize no podrá obtener el tamaño del texto. Algunos amigos pueden decir que si no está configurado, lo hará. será el tamaño de fuente predeterminado del navegador, pero el texto actual puede heredar el atributo de tamaño de fuente de su clase principal, lo que significa que no es el tamaño de fuente predeterminado del navegador. Entonces, ¿cómo deberíamos solucionarlo?
var fontSize=getComputedStyle(className[0],undefinido).getPropertyValue("font-size")
Esta línea de código le permite obtener el tamaño de fuente después de representarla en el navegador.