JavaScript muestra el efecto de elipsis después de exceder el contenedor
En proyectos reales, debido a la incertidumbre de la longitud del contenido del texto y la fijación del diseño de la página, es inevitable que el contenido de texto exceda el área DIV (u otras etiquetas, lo mismo a continuación). La mejor manera en este momento es mostrarlo automáticamente en un ellipsis (...) cuando el texto excede el ancho de div. De esta manera, según la costumbre, las personas sabrán que hay textos aquí que se omiten. Hay una propiedad en CSS llamada Text-Overflow: Ellipsis; Por ejemplo, puede escribirlo así usando CSS:
{ancho: 27em; White-Space: Nowrap; Texto-Overflow: Ellipsis; -o-text-upverflow: ellipsis; desbordamiento: oculto;} El texto de desbordamiento las elipsis no se puede implementar solo en el navegador Firefox, y el texto se deja directamente desde el medio. No hablo de cómo usar CSS para implementar esto. La implementación específica de CSS se puede usar en Baidu. Lo más importante aquí es cómo implementarlo con JS y cómo escribir un componente simple a través de JS. ¡Puedo llamar directamente al método de inicialización de JS para implementarlo! Por ejemplo, los siguientes efectos:
¡Los puntos y puntos en la parte posterior solicitan al usuario que hay más contenido que no se ha mostrado para completar tal efecto!
¡Di menos tonterías primero! Primero, echemos un vistazo al efecto de demostración que hice y entenderás lo que es.
Si quieres ver el efecto, ¡haz clic en mí! ¿DE ACUERDO?
1: Echemos un vistazo a los elementos de configuración de componentes primero:
TargetCls
NULL, los elementos requeridos para que el contenedor sea interceptado por el objetivo son nulos de forma predeterminada
LimitLinEnumber 1, el número de filas a mostrar es 1 línea de forma predeterminada
Tipo '...', tipo que excede la longitud del contenedor se muestra de forma predeterminada a ellipsis
LineHeight 18, la altura de línea predeterminada del nodo DOM es 18
Isshowtitle True, se requiere el título para mostrar todos los contenidos. El valor predeterminado es verdadero
ISCHARLIMIT Límites falsos para mostrar las elipsis en función de la longitud del personaje
MaxLength 20 La longitud predeterminada es 20. Los ellipsis se mostrarán después de exceder el carácter 20.
Dos: análisis
1. Primero, hablemos de este componente: admite dos formas de interceptar cadenas. Primero: interceptar de acuerdo con la longitud de los personajes y mostrar los elipsis después de superarlos. Por ejemplo, lo llamo así:
Nuevo múltipleslipsis ({
"TargetCls": '.Text8',
"ischarlimit": verdadero,
"MaxLength": 18
});
La inicialización de esta manera significa que ISCharlimit es verdadero, lo que significa interceptar con el número de caracteres. La longitud máxima maxlength es 18. Inicialización de esta manera, porque el código primero determinará que si ISCharlimit es verdadero, se interceptará directamente de acuerdo con el número de caracteres, como el siguiente código:
2. El segundo tipo se intercepta en función del número de filas y alturas. Por ejemplo, la altura de línea del elemento de configuración predeterminado es 18. Si quiero mostrar 2 filas, es decir, la altura H = 18*2. Si la altura del contenedor es 100, entonces el método de interceptación es:
Use (100 - Longitud del tipo - 1) si es mayor que 18 × 2, si es mayor que, continúe interceptando, de lo contrario no se interceptará, ¡y el efecto de elipsis se mostrará! El siguiente código:
Desventajas: sin embargo, si usa una intersección de fila alta, está bien si los datos son relativamente pequeños, pero si hay muchos datos, como una altura de 500 píxeles o más, afectará relativamente el rendimiento, porque tienen que calcular n veces cada vez (n significa que hay muchas funciones que llaman a bucle).
Todos los códigos JS son los siguientes:
Copiar el código
/ * * Multiellipsis basado en js * @author tUgenhua */ function multiellipsis (opciones) {var self = this; self.options = $ .extend ({}, predeterminado, opciones || {}); self._init (); } $ .extend (multiellipsis.prototype, {// página inicialization_init: function () {var self = this, cfg = self.options; if (cfg.targetcls == null || $ (cfg.targetcls + "") [0] === Desconde) {if (window.console vacío! ");} return;} if (cfg.isshowtitle) {// Agregar atributo de título para obtener el texto del elemento var title = self.gettext (); $ (cfg.targetCls) .Attr ({" Título ": Título});} // Si está limitado por los caracteres, luego regresa directamente sin comprar la altura sin compararla a la altura; {Título"); } self._comPareHeight (cfg.lineHeight * cfg.limitlinEnnumber); self.gettext (); Valor primero. function (text) {var self = this, cfg = self.options; ") [0]). Html (texto); maxlineHeight) {self._deletetext (self.gettext ()); text.substring (0, text.length - typelen - 1); _getTargethEight: function () {var self = this, cfg = self.options; var defaults = {'targetCls': null, // El contenedor a interceptar por el Target'lImitLinEnumber ': 1, // El número de filas limitadas por el número de filas* La altura de la fila de una línea> = la altura del contenedor' tipo ':' ... ', // El tipo que tiene la longitud de la longitud es la línea predeterminada es la línea de las líneas de la línea de la línea. Node'isshowtitle ': true, // Si el título muestra todo el contenido es verdadero de forma predeterminada' isCharlimit ': false, // La pantalla de ellipsis está limitada por la longitud del carácter' maxLength ': 20 // predeterminado es 20};El método anterior para mostrar el efecto de elipsis después de JavaScript excede el contenedor (compatible con una línea o múltiples líneas) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.