Prefacio
Esta situación se encontrará durante el desarrollo. Solo se muestran dos líneas. Si se exceden más de dos líneas, se mostrará un botón "Mostrar más". Haga clic en el botón para mostrar el contenido de las líneas restantes. Hay un JQuery complemento loadingDots que implementa específicamente esta función. Sin embargo, hoy vamos a usar JavaScript nativo para implementar este requisito. Para lograr este requisito, lo más importante es determinar el número de líneas del texto en este contenedor. Después de obtener el número de líneas, modifique la altura del elemento y determine si se muestra el botón de carga.
Window.getComputedStyle ()
Para usar el código JavaScript nativo para obtener las propiedades de estilo individuales de un elemento, es inevitable usar window.getComputedStyle() . Puede devolver los estilos de un elemento HTML cuando realmente se muestra en el navegador; por supuesto, el navegador bloqueará algunos estilos. Por ejemplo, si desea obtener el color de un enlace y estar preparado para juzgar si el usuario ha visitado una determinada dirección por color, eso definitivamente no es posible.
El método devuelve un par de valores clave de estilo, que es una instancia de CSSStyleDeclaration . Los nombres de índice de cada atributo no tienen - y se adopta la nomenclatura de camello. Por ejemplo, lineHeight .
Número de filas = altura total/altura de línea
La altura total se puede obtener a través de la altura. La altura de la fila se puede obtener a través de lineHeight , y el resultado se redondea para obtener el número de filas.
Pero hay un problema, si line-height no está configurado para un elemento, su valor predeterminado es normal , que generalmente es 1.2 en los navegadores de escritorio, pero también está relacionado con las fuentes. Por lo tanto, es mejor establecer line-height para elementos que necesitan calcular el número de filas.
Una implementación simple es la siguiente:
Function CountLines (ELE) {var Styles = window.getComputedStyle (ELE, NULL); var lh = parseint (styles.lineheight, 10); var h = parseint (Styles.Height, 10); var lc = math.round (h / lh); console.log ('Line Count:', lc, 'Line-Hevight:', lh, 'altura:', h); return lc;}Ejemplo de código completo
<! DocType html> <html> <head> <title> Line Count </title> <style type = "text/css"> p {line-height: 1.3em; } </style> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> </head> <body> <p id = "target"> ella solo hizo que un bebé se viera encantador. Todo es blanco y siempre tiene un pastel de arándanos fresco que está al vapor y los bollos y la crema cerrada y está leyendo al viejo y el mar y su pequeño hijo está muy lleno de gorros. Es increíble, y pensé que esto es encantador. Mi hijo es como jugar con dispositivos explosivos. No sé dónde los ha encontrado, como pegarlos en la oreja de nuestro perro. Ella ya sabe cómo secar la pared porque pone agujeros en la pared. <Br /> "Los chinos de hoy son al igual que los alemanes en aquel entonces, disfrutar de la ilusión de" ascenso "y acostumbrarse a creer en la adulación de los demás. También dan por sentado que, mientras China continúe manteniendo el crecimiento económico, no solo el futuro agregado económico superará a los 'líderes mundiales' de los Estados Unidos. bolsillo." Cheng Yawen, profesor de la Escuela de Relaciones Internacionales y Asuntos Públicos de la Universidad de Estudios Extranjeros de Shanghai, señaló en su nuevo libro "Potencias estratégicas de grandes potencias", que muchas personas en China ahora están atrapadas en la ilusión de "prosperidad" y no se dan cuenta de que detrás de la producción económica total, China es en realidad un país extremadamente atrasado. No hay un gran país en el mundo que haya surgido en una situación tranquila y pacífica, y la nueva ronda de rejuvenecimiento de civilización de China también estará llena de riesgos, giros y giros. Evitar que un país colapse, desintegración o disminución debería convertirse en la principal prioridad de la estrategia nacional de China. La profundización de la "felicidad suave" solo hará que un país sea vulnerable. </p> <p> Número de filas: <span id = "ducha"> </span> </p> Cambie el tamaño de la ventana y calcule automáticamente <button onClick = "CountLines ()"> Calcule inmediatamente </botón> <script type = "text/javascript"> var target = document.getElementById ('Target'); var ducha = document.getEngetByid ('shower'); functionlines (ele) (ele styles) Window.getComputedStyle (ELE, NULL); var lh = parseint (styles.lineheight, 10); var h = parseint (Styles.Height, 10); var lc = math.round (h / lh); console.log ('Line Count:', lc, 'Line-Hevight:', lh, 'altura:', h); return lc;} function Change () {shower.innerhtml = CountLines (Target);} Window.onresize = Change; Change (); </script> </body> </html> [/html]Resumir
Lo anterior se trata de este artículo. Espero que el contenido de este artículo sea útil para todos los que usan JavaScript. Si tiene alguna pregunta, deje un mensaje para discutir.