Es probable que muchas personas se hayan enfrentado a un problema cuando es necesario mostrar un texto en una línea. En este caso, el texto puede ser bastante largo, y el ancho del bloque en el que se encuentra este texto suele estar limitado, al menos por el mismo tamaño de la ventana del navegador. Para estos casos, se inventó la propiedad text-overflow, que se incluyó en la recomendación CSS3, y se implementó por primera vez en IE6, hace mucho tiempo. Si esta propiedad se usa para un bloque, si su texto es más ancho que el propio bloque, entonces el texto se corta y se agrega una elipsis al final. Aunque aquí no todo es tan sencillo, volveremos a esto un poco más adelante.
Con Internet Explorer "todo está claro, ¿qué pasa con otros navegadores? Y aunque la propiedad de desbordamiento de texto está actualmente excluida de la especificación CSS3, Safari la admite (al menos en la versión 3), Opera también (desde 9 versión, aunque la propiedad se llama -o-overflow-text). Firefox no lo hace, no lo admite, e incluso en la versión 3. Es triste, pero cierto, pero ¿puedes hacer algo?
Claro que puedes hacerlo. Cuando busqué en Internet esta propiedad, y al igual que con Firefox, encontré una solución simple. Esencia de la solución:
Eso es todo. Lea los detalles en el artículo.
La solución no es mala, pero hay problemas:
- El texto se puede cortar en el medio (relativamente hablando) de la letra, y veremos su "muñón".
- La elipsis siempre se muestra, incluso cuando el texto es más pequeño que el ancho del bloque (es decir, no se sale de él y no se necesita la elipsis).
Paso uno
Primero, centrémonos en el segundo problema, que es cómo evitar mostrar puntos suspensivos cuando no se necesitan. Después de romperme la cabeza y experimentar "un poco", encontré una solución. Intentaré explicarlo.
La conclusión es que necesitamos un bloque separado con puntos suspensivos, que aparecerá solo cuando el texto ocupe demasiado espacio de ancho. Entonces tuve la idea de un bloque flotante de descarga. Aunque suene aterrador, solo significa un bloque, que siempre está ahí, y se presiona hacia la derecha, pero cuando el ancho del texto se vuelve grande, el texto empuja el bloque a la siguiente línea.
Pasemos a la práctica, de lo contrario es difícil de explicar. Establezcamos la estructura HTML:
texto muy largo
No muy compacto, pero no pude hacer nada menos. Entonces, tenemos un bloque contenedor DIV.ellipsis, un bloque con nuestro texto y otro bloque que contendrá una elipsis. Tenga en cuenta que el "bloque con puntos suspensivos" en realidad está vacío, porque no necesitamos los tres puntos adicionales cuando copiamos el texto. Además, no se deje intimidar por la falta de clases adicionales, ya que esta estructura está bien dirigida a través de selectores CSS. Y aquí está el CSS en sí:
.ellipsis (overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red;) .ellipsis\u003e DIV: first-child (float: left;) .ellipsis\u003e DIV + DIV (flotante: derecha; margen superior: -1.2em;) .ellipsis\u003e
Eso es todo. Comprobamos y nos aseguramos de que en Firefox, Opera, Safari funcione según lo previsto. En IE, el resultado es muy extraño, pero predecible. En IE6 todo salió mal, y en IE7 simplemente no funciona porque no admite contenido generado. Pero volveremos a IE más tarde.
Mientras tanto, analicemos lo que se ha hecho. Primero, establecemos la altura de la línea y la altura del cuadro principal, ya que necesitamos conocer la altura del cuadro y la altura de la línea de texto. Establecemos el mismo valor para el margen superior del bloque de puntos suspensivos, pero con un valor negativo. Por lo tanto, cuando el bloque no se "suelta" a la siguiente línea, estará por encima de la línea de texto (una línea), cuando se suelte, estará en su nivel (de hecho, es más bajo, solo estiramos una línea hacia arriba). Para ocultar lo innecesario, especialmente cuando no necesitamos mostrar los puntos suspensivos, hacemos overflow: hidden para el bloque principal, por lo que cuando los puntos suspensivos están por encima de la línea, no se mostrarán. Esto también nos permite eliminar el texto que cae fuera del bloque (en el borde derecho). Para evitar que el texto se ajuste y empuje inesperadamente el bloque con puntos suspensivos cada vez más bajos, hacemos espacios en blanco: nowrap, evitando así la separación de palabras: nuestro texto siempre estará en una línea. Para el bloque con el texto, establecemos float: left para que no colapse inmediatamente el bloque con puntos suspensivos y ocupe el ancho mínimo. Dado que ambos bloques están flotando dentro del bloque principal (DIV.ellipsis) (float: left / right), el bloque principal colapsará cuando el bloque con el texto esté vacío, por lo que establecemos una altura fija para el bloque principal (altura: 1.2em). Finalmente, usamos el pseudo-elemento :: after para mostrar la elipsis. Para este pseudo-elemento, también establecemos un fondo para superponer el texto que estará debajo de él. Establecemos un marco para el bloque principal, solo para ver las dimensiones del bloque, lo eliminaremos más adelante.
Si Firefox admitiera pseudo-elementos, así como Opera y Safari en términos de su posicionamiento (configuración de posición / flotación, etc. para ellos), entonces sería posible no usar un bloque separado para la elipsis. Intente reemplazar las últimas 3 reglas con lo siguiente:
.ellipsis\u003e DIV: primer hijo :: después (flotador: derecho; contenido: "..."; margen superior: -1.2em; color de fondo: blanco; posición: relativo;)
en Opera y Safari, todo funciona como antes, sin el bloque de puntos suspensivos adicional. Firefox es decepcionante. Pero es por él que tomamos una decisión. Bueno, tienes que conformarte con la estructura HTML original.
Segundo paso
Como puede ver, eliminamos el problema de la aparición de puntos suspensivos cuando el texto encaja en el bloque. Sin embargo, todavía tenemos un problema más: el texto está cortado en el medio de las letras. Y además, no funciona en IE. Para superar ambos, debe usar la regla de desbordamiento de texto nativo para los navegadores, y solo para Firefox use la solución descrita anteriormente (no hay alternativa). Descubriremos cómo hacer la solución "solo para Firefox" más adelante, pero ahora intentemos qué funciona usando text-overflow. Modifiquemos el CSS:
.ellipsis (desbordamiento: oculto; espacio en blanco: nowrap; altura de línea: 1.2em; altura: 1.2em; borde: 1px rojo sólido; desbordamiento de texto: puntos suspensivos; -o-text-overflow: puntos suspensivos; ancho: 100%; } .ellipsis * (pantalla: en línea;) / * .ellipsis\u003e DIV: primer hijo (flotador: izquierda;) .ellipsis\u003e DIV + DIV (flotador: derecha; margen superior: -1.2em;) .ellipsis\u003e DIV + DIV :: después (color de fondo: blanco; contenido: "...";) */
Resulta que no hay mucho que editar. Se han agregado tres líneas al estilo del bloque principal. Dos de ellos incluyen desbordamiento de texto. Configuración de ancho: 100% es necesario para IE, de modo que el texto no expanda el bloque hasta el infinito y la propiedad text-overflow funcione; de hecho, hemos limitado el ancho. En teoría, el DIV, como todos los elementos de bloque, se extiende por todo el ancho del contenedor y el ancho: el 100% es inútil e incluso dañino, pero IE tiene un problema de diseño, ya que el contenedor siempre se estira para adaptarse al tamaño del contenido, por lo que no hay otra forma. También hicimos todos los elementos internos en línea, porque para algunos navegadores (Safari y Opera) el desbordamiento de texto no funcionará de otra manera, ya que hay elementos de bloque adentro. Hemos comentado las tres últimas reglas, ya que en este caso no son necesarias y todo se rompe (conflictos). Estas reglas solo serán necesarias para Firefox.
Veamos qué pasó y continuemos.
Paso tres
Cuando volví a mirar la página (antes de escribir este artículo), mencionada al principio, luego, por el bien del interés, busqué en los comentarios ideas ingeniosas relacionadas. Y encontré, en un comentario, donde se decía sobre otra solución que funciona en Firefox e IE (para esta persona, como para el autor del primer artículo, aparentemente no existen otros navegadores). Entonces, en esta solución, el autor lucha de manera algo diferente con este fenómeno (falta de desbordamiento de texto), colgando controladores en los eventos de desbordamiento y desbordamiento a elementos para los cuales era necesario poner puntos suspensivos si era necesario. No está mal, pero me parece que esta solución es muy cara (en cuanto a recursos), sobre todo porque es algo sutil para él. Sin embargo, al descubrir cómo logró esto, se encontró con algo interesante, a saber, la propiedad CSS -moz-binding. Según tengo entendido, este es un análogo del comportamiento en IE, solo que con una salsa diferente y de manera más abrupta. Pero no entremos en detalles, digamos que de esta manera puede colgar un controlador de JavaScript en un elemento usando CSS. Suena extraño, pero funciona. Que estamos haciendo:
.ellipsis (overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red; text-overflow: ellipsis; -o-text-overflow: ellipsis; ancho: 100% ; -moz-binding: url (moz_fix.xml # puntos suspensivos); zoom: 1; ) .ellipsis * (pantalla: en línea;) .moz-ellipsis\u003e DIV: primer hijo (flotador izquierdo; bloqueo de pantalla; } .moz-elipsis\u003e DIV + DIV (flotante: derecha; margen superior: -1.2em; bloqueo de pantalla; } .moz-elipsis\u003e DIV + DIV :: después (color de fondo: blanco; contenido: "...";)
Como puede ver, no volvimos a realizar muchos cambios. En este paso en IE7, hay un error extraño, todo está sesgado, si no configura el zoom: 1 para la unidad principal (la opción más fácil). Si elimina (elimina, comenta) la regla .ellipsis * o .moz-ellipsis\u003e DIV + DIV (que no se aplica a IE7 en absoluto), el error desaparece. Todo esto es extraño, si alguien sabe de qué se trata, házmelo saber. Por ahora, sigamos con el zoom: 1 y pasemos a Firefox.
La propiedad -moz-binding conecta el archivo moz_fix.xml a la instrucción con elipsis del identificador. El contenido de este archivo xml es el siguiente:
Todo lo que hace este constructor es agregar la clase moz-ellipsis al elemento para el que se activó el selector. Esto solo funcionará en Firefox (¿navegadores gecko?), Por lo que solo en Firefox se agregará la clase moz-ellipsis a los elementos, y podemos agregar reglas adicionales para esta clase. Que es lo que querían. No estoy completamente seguro de la necesidad de this.style.mozBinding \u003d "", pero por experiencia con la expresión es mejor ir a lo seguro (en general, no estoy muy familiarizado con este lado de Firefox, por lo que puedo estar equivocado).
Puede recibir una alerta de que esta técnica utiliza un archivo externo y JavaScript en general. No tengas miedo. En primer lugar, si el archivo no está cargado y / o JavaScript está deshabilitado y no funciona, está bien, el usuario simplemente no verá los puntos suspensivos al final, el texto se cortará al final del bloque. Es decir, en este caso obtenemos una solución "discreta". Puedes verlo por ti mismo.
Por lo tanto, obtuvimos un estilo para los cuatro navegadores grandes que implementa el desbordamiento de texto para Opera, Safari e IE, y lo emula para Firefox, no tan popular, pero es mejor que nada.
Paso cuatro
En este punto, se podría poner fin, pero me gustaría mejorar un poco nuestra solución. Dado que podemos colgar el constructor en cualquier bloque y, por lo tanto, obtener control sobre él, ¿por qué no usar esto? Simplifiquemos nuestra estructura:
texto muy largo
¡Oh si! Creo que estará de acuerdo conmigo, ¡esto es lo que necesita!
Ahora eliminemos todo lo innecesario del estilo:
.ellipsis (overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; text-overflow: ellipsis; -o-text-overflow: ellipsis; ancho: 100%; -moz-binding: url (moz_fix.xml # puntos suspensivos);) .moz-ellipsis\u003e DIV: primer hijo (float: left;) .moz-ellipsis\u003e DIV + DIV (float: right; margin-top: -1.2em;) .moz -elipsis\u003e DIV + DIV :: después (color de fondo: blanco; contenido: "...";)
Finalmente hemos eliminado el borde rojo :)
Ahora, agreguemos un poco a nuestro moz_fix.xml:
¿Que está pasando aqui? Estamos recreando nuestra estructura HTML inicial. Es decir, esas complejidades con los bloques se hacen de forma automática, y solo en Firefox. El código JavaScript está escrito en las mejores tradiciones :)
Desafortunadamente, no podemos evitar la situación en la que el texto se corta a la mitad de la carta (aunque, quizás temporalmente, ya que mi solución todavía es muy cruda y puede funcionar en el futuro). Pero podemos suavizar un poco este efecto. Para ello necesitamos una imagen (fondo blanco con un degradado transparente) y algunos cambios en el estilo:
.moz-ellipsis\u003e DIV: primer hijo (flotador: izquierda; margen derecho: -26px; ) .moz-ellipsis\u003e DIV + DIV (flotante: derecha; margen superior: -1.2em; background: url (ellipsis.png) repeat-y; padding-left: 26px; }
Vemos y disfrutamos la vida.
Sobre esto y poner fin.
Conclusión
Daré un pequeño ejemplo para un diseño de terceros. Tomé la tabla de contenido de una de las páginas de Wikipedia (la primera que apareció) y apliqué el método descrito anteriormente.
En general, esta solución se puede llamar universal solo en un tramo. Todo depende de su diseño y su complejidad. Es posible que necesite un archivo o tal vez una pandereta. Aunque en la mayoría de los casos, creo que funcionará. Y luego, ahora tienes un punto de partida;)
Espero que hayas aprendido algo interesante y útil del artículo;) Aprende, experimenta, comparte.
¡Buena suerte!
Vlad Merzhevich
A pesar de que los monitores con grandes diagonales son cada vez más accesibles y su resolución está en constante crecimiento, en ocasiones la tarea surge en un espacio limitado para que quepan una gran cantidad de texto. Por ejemplo, esto puede ser necesario para la versión móvil del sitio o para una interfaz donde el número de líneas es importante. En tales casos, tiene sentido recortar líneas largas de texto, dejando solo el comienzo de la oración. Por lo tanto, llevaremos la interfaz a un formato compacto y reduciremos la cantidad de información mostrada. El recorte real de líneas se puede hacer en el lado del servidor usando el mismo PHP, pero a través de CSS es más fácil, además, siempre puedes mostrar el texto completo, por ejemplo, cuando pasas el cursor del mouse sobre él. A continuación, consideraremos métodos para cortar texto con tijeras imaginarias.
De hecho, todo se reduce a usar la propiedad de desbordamiento con el valor oculto. Las diferencias solo radican en la diferente presentación de nuestro texto.
Usando desbordamiento
Para que la propiedad de desbordamiento se muestre con el texto en todo su esplendor, debe deshacer el ajuste del texto usando espacios en blanco con el valor nowrap. Si esto no se hace, entonces el efecto que necesitamos no será, se agregarán guiones al texto y se mostrará en su totalidad. El ejemplo 1 muestra cómo recortar texto largo con un conjunto específico de propiedades de estilo.
Ejemplo 1: desbordamiento de texto
HTML5 CSS3 IE Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 1.
Figura: 1. Tipo de texto después de aplicar la propiedad de desbordamiento
Como puede ver en la figura, solo hay un inconveniente en general: no es obvio que el texto tenga una continuación, por lo que el usuario debe ser consciente de ello. Por lo general, esto se hace con un gradiente o puntos suspensivos.
Agregar un degradado al texto
Para que quede más claro que el texto de la derecha no termina, puede superponerlo con un degradado de transparente a color de fondo (Figura 2). Esto creará el efecto de una disolución gradual del texto.
Figura: 2. Texto degradado
El ejemplo 2 muestra cómo crear este efecto. El estilo del elemento en sí prácticamente seguirá siendo el mismo, el degradado en sí se agregará utilizando el pseudoelemento :: after y CSS3. Para hacer esto, inserte un pseudo-elemento vacío a través de la propiedad de contenido y aplíquele un degradado con diferentes prefijos para los principales navegadores (ejemplo 2). El ancho del degradado se puede cambiar fácilmente a través del ancho, también puede ajustar el nivel de transparencia reemplazando el valor 0.2 con el suyo.
Ejemplo 2. Degradado sobre texto
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
El arpegio intradiscreto transforma el poly-row, este es un vertical de un paso en una tela ultra-polifónica.
Este método no funciona en Internet Explorer hasta la versión 8.0 porque no admite degradados. Pero puede renunciar a CSS3 y hacer el degradado a la antigua, usando una imagen PNG-24.
Este método solo funciona con un fondo sólido y, en el caso de una imagen de fondo, el degradado sobre el texto será llamativo.
Puntos suspensivos al final del texto
También puede utilizar puntos suspensivos en lugar de un degradado al final del texto recortado. Además, se agregará automáticamente utilizando la propiedad text-overflow. Todos los navegadores lo entienden, incluidas las versiones anteriores de IE, y el único inconveniente de esta propiedad es su estado aún poco claro. Parece que esta propiedad está incluida en CSS3, pero el código con ella no pasa la validación.
El ejemplo 3 muestra el uso de la propiedad de puntos suspensivos text-overflow, que añade puntos suspensivos. Cuando pasa el cursor del mouse sobre el texto, se muestra en su totalidad y se resalta con un color de fondo.
Ejemplo 3. Uso de desbordamiento de texto
HTML5 CSS3 IE Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 3.
Figura: 3. Texto con puntos suspensivos
Una gran ventaja de estos métodos es el hecho de que el degradado y los puntos suspensivos no se muestran si el texto es corto y cabe por completo en el área especificada. Por lo tanto, el texto se mostrará como de costumbre cuando esté completamente visible en la pantalla y se recortará cuando se reduzca el ancho del elemento.
Qué molestos son a veces los nombres largos de los enlaces de productos (tres líneas cada uno) o los títulos largos de otros bloques. Qué bueno sería si de alguna manera pudieras restringir todo, hacerlo más compacto. Y cuando pasas el mouse, ya muestra el título completo.
Para ello, nuestro CSS favorito viene a nuestro rescate. Es muy simple, mira.
Digamos que tenemos un bloque del catálogo con productos:
Aquí está su estructura:
Un producto maravilloso a un precio excelente, solo 100 rublos. ¡Ilumina tus tardes solitarias y dale una explosión de vitalidad!
Estos son sus estilos:
Someblock (borde: 1px sólido #cccccc; margen: 15px automático; relleno: 10px; ancho: 250px;) .header (borde inferior: 1px discontinuo; tamaño de fuente: 16px; peso de fuente: negrita; margen inferior: 12px ;)
De acuerdo, se ve terrible. Por supuesto, puede acortar el nombre del producto. Pero, ¿y si hay cientos o miles de ellos? También puede usar php para cortar parte del nombre, limitándose a un cierto número de caracteres. Pero, ¿qué pasa si el diseño cambia más tarde y los bloques son más pequeños o viceversa 2-3 veces más? Nada de esto es una opción, nada de esto nos conviene.
Aquí es donde CSS y su propiedad mágica vienen a nuestro rescate. desbordamiento de texto... Pero debe usarse correctamente junto con varias otras propiedades. A continuación, le mostraré una solución lista para usar, después de lo cual explicaré qué es qué.
Entonces, dejando de lado la edición manual de nombres de productos y el recorte programático de estilos, tomamos el CSS y vemos lo que obtenemos:
Milagro Yudo el agente de suministro de energía es vespertino, misterioso, el arte. 20255-59
Un producto maravilloso a un precio excelente, solo 100 rublos. ¡Ilumina tus tardes solitarias y dale una explosión de vitalidad!
Bueno, ¿es mejor? En mi opinión, ¡muy parejo! Mueva el mouse sobre el nombre ... ¡voilá! Aquí se nos muestra en su totalidad.
Nada ha cambiado en nuestra estructura, acabo de agregar una diva con una clase. .encabezamiento etiqueta de título. Y aquí están los estilos nuevos y actualizados:
Someblock (border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px;) .header (border-bottom: 1px discontinue; font-size: 16px; font-weight: bold; margin-bottom: 12px ; desbordamiento: oculto; desbordamiento de texto: puntos suspensivos; espacio en blanco: nowrap;)
Mira lo que hemos hecho:
- Agregamos la propiedad al bloque espacio en blanco: nowrap, que elimina del texto la capacidad de ajustar palabras en una nueva línea, colocándola así en una línea;
- Luego agregamos la propiedad desbordamiento: oculto, que limitaba la visibilidad de nuestra línea al ancho del bloque, cortando así todo lo innecesario y no mostrándolo al visitante;
- Bueno, al final, agregamos tres puntos a nuestra línea usando la propiedad desbordamiento de texto: puntos suspensivos, dejando que el visitante entienda que este no es el final de la línea, y que es necesario, probablemente, levantar el mouse y verlo en su totalidad.
Ama el CSS, aprende CSS y la creación de sitios no te parecerá tan difícil \u003d)
Hay texto de longitud arbitraria que debe mostrarse dentro de un bloque de altura y ancho fijos. En este caso, si el texto no encaja completamente, se debe mostrar un fragmento del texto que encaje completamente en el bloque especificado, después de lo cual se establece una elipsis.
Esta tarea es bastante común, al mismo tiempo no es tan trivial como parece.
Opción para texto de una sola línea en CSS
En este caso, se puede utilizar la propiedad text-overflow: ellipsis. En este caso, el contenedor debe tener la propiedad desbordamiento igual oculto o acortar
Bloque (ancho: 250px; espacio en blanco: nowrap; overflow: hidden; text-overflow: elipsis;)
Opción para texto CSS de varias líneas
La primera forma de recortar texto de varias líneas utilizando propiedades CSS es aplicar pseudoelementos : antes de y : después... Primero, el marcado HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud ejercicio ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit teugue duis dolore
Y ahora las propiedades mismas
Box (overflow: hidden; height: 200px; width: 300px; line-height: 25px;) .box: before (content: ""; float: left; width: 5px; height: 200px;) .box\u003e *: first -child (float: right; width: 100%; margin-left: -5px;) .box: after (content: "\\ 02026"; box-sizing: content-box; float: right; position: related; top: -25px; izquierda: 100%; ancho: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient (a la derecha, rgba (255, 255, 255, 0), blanco 50%, blanco);)
Otra forma es usar la propiedad de ancho de columna con la que establecemos el ancho de columna para texto de varias líneas. Sin embargo, al utilizar este método, no obtendrá puntos suspensivos al final. HTML:
Bloque (desbordamiento: oculto; alto: 200px; ancho: 300px;) .block__inner (-webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; height: 100%;)
La tercera solución para texto de varias líneas en CSS es para navegadores Webkit... En él tendremos que utilizar varias propiedades específicas con el prefijo -kit web... El principal es -webkit-line-clamp, que le permite especificar el número de líneas que se mostrarán en un bloque. La solución es hermosa pero bastante limitada debido a su trabajo en un grupo limitado de navegadores.
Bloque (overflow: hidden; text-overflow: elipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;)
Opción de JavaScript para texto de varias líneas
Aquí se usa un bloque invisible adicional, en el que se coloca inicialmente nuestro texto, después de lo cual, se elimina un carácter a la vez hasta que la altura de este bloque sea menor o igual que la altura del bloque deseado. Y al final, el texto se mueve al bloque original.
var block \u003d documento. querySelector (".block"), texto \u003d bloque. innerHTML, clon \u003d documento. createElement ("div"); clon. estilo. posición \u003d "absoluta"; clon. estilo. visibilidad \u003d "oculto"; clon. estilo. ancho \u003d bloque. clientWidth + "px"; clon. innerHTML \u003d texto; documento. cuerpo. appendChild (clon); var l \u003d texto. longitud - 1; for (; l\u003e \u003d 0 && clone. clientHeight\u003e block. clientHeight; - l) (clone. innerHTML \u003d text. substring (0, l) + "...";) bloque. innerHTML \u003d clonar. innerHTML;
Esto tiene la forma de un complemento jQuery:
(function ($) (var truncate \u003d function (el) (var text \u003d el. text (), height \u003d el. height (), clone \u003d el. clone (); clone. css ((position: "absoluta", visibilidad: "oculto", altura: "auto")); el. después (clon); var l \u003d texto. longitud - 1; for (; l\u003e \u003d 0 && clon. altura ()\u003e altura; - l) (clon. text (text. substring (0, l) + "...");) el. text (clone. text ()); clone. remove ();); $. fn. truncateText \u003d function () (devuelve esto. cada (función () (truncar ($ (esto));)););) (jQuery));
La introducción de CSS3 está revolucionando la vida cotidiana de los diseñadores web. CSS3 nunca deja de sorprendernos todos los días. Las cosas que antes solo se podían hacer con javascript ahora se hacen fácilmente con CSS3. Por ejemplo, la propiedad Text-Overflow.
A veces, en el proceso de creación de sitios, necesitamos ocultar parte del texto dinámico sin pasar a la siguiente línea. Es decir, inserte texto largo en una tabla de ancho fijo. Al mismo tiempo, es necesario mostrarle al usuario que la parte visible del texto no lo es todo. También hay una parte oculta. Esto se puede mostrar con puntos suspensivos (...).
Con CSS3, podemos hacer esto fácilmente usando la propiedad de desbordamiento de texto de CSS
Margen
Desbordamiento de texto: puntos suspensivos;
Valor elipsis le permite agregar puntos suspensivos (...) después del texto
La propiedad text-overflow: ellipsis es útil cuando:
1. El texto sale de la celda.
2. La celda tiene espacio libre: nowrap.
Tenemos un div con un ancho de 150 píxeles para mostrar los nombres de las empresas de la base de datos. Pero al mismo tiempo, no queremos que los nombres largos de empresas salten a una nueva línea y estropeen la apariencia de la tabla. Es decir, necesitamos ocultar el texto que supera los 150 píxeles. También queremos informar al usuario sobre esto. De modo que quiere decir que no se muestra todo el nombre. Y queremos que todo el texto se muestre al pasar el mouse.
Echemos un vistazo a cómo podemos hacer esto con CSS3.
Company-wrap ul li (
desbordamiento de texto: puntos suspensivos;
desbordamiento: oculto;
espacio en blanco: nowrap; )
- nombre de empresa
- Gestión de activos de Envestnet
- Inversiones Russell
- Northwestern Mutual Financial Network
- ING Financial Networks
Soporte de navegador
Con soporte entre los navegadores, esta propiedad tiene un pequeño matiz. Todos excepto Firefox se renderizan perfectamente bien. ¡Pero afortunadamente también hay una solución a este problema!
Elipsis en Firefox
Desafortunadamente, el gecko (motor de renderizado) de Firefox no es compatible con esta propiedad. Sin embargo, este navegador es compatible con XBL, con el que saldremos de esta situación.
Geco Es un motor de diseño gratuito para los navegadores Mozilla Firefox, Netscape y otros. Los nombres antiguos son "Raptor" y "NGLayout". El concepto central de Gecko es admitir estándares abiertos de Internet como HTML, CSS, W3C DOM, XML 1.0 y JavaScript. Otro concepto es multiplataforma. Actualmente, Gecko se ejecuta en los sistemas operativos Linux, Mac OS X, FreeBSD y Microsoft Windows, así como en Solaris, HP-UX, AIX, Irix, OS / 2, OpenVMS, BeOS, Amiga y más.
Para mostrar puntos suspensivos en Firefox, debemos agregar una línea a la hoja de estilo.
si desea deshabilitar la propiedad, simplemente agregue:
Moz-binding: url ("bindings.xml # none");
El siguiente paso es crear un archivo bindings.xml en la misma ubicación que la hoja de estilo. ¡Podemos usar cualquier editor de texto para esto! Copie el código siguiente y nombre el archivo bindings.xml.
var strings \u003d this.textContent.split (/ \\ s + / g)
if (! strings [0]) strings.shift ()
if (! strings [strings.length - 1]) strings.pop ()
this.value \u003d strings.join ("")
this.display \u003d strings.length? "": "ninguna"
Código final para todos los navegadores
Company-wrap ul li (
desbordamiento de texto: puntos suspensivos;
-o-text-overflow: puntos suspensivos;
-moz-binding: url ("bindings.xml # puntos suspensivos");
espacio en blanco: nowrap;
desbordamiento: oculto;
}
CSS3 se está convirtiendo en la principal herramienta de diseño web en todo el mundo para crear sitios nunca antes vistos con un mínimo de código. Hay soluciones simples de una línea que antes solo eran posibles con Photoshop o javascript. ¡Empiece a explorar las posibilidades de CSS3 y HTML5 hoy y no se arrepentirá!
Para destacar entre la masa gris de traductores y ganar su simpatía, queridos lectores, al final de mis lecciones habrá pensamientos sabios y aforismos. Todos en estas líneas encontrarán algo propio :)
Soporta con dignidad lo que no puedes cambiar.
