Determina la visibilidad del texto en el bloque si el texto completo no cabe en el área especificada. Hay dos opciones: el texto se corta; el texto se corta y se agrega una elipsis al final de la línea. text-overflow funciona cuando la propiedad overflow se establece en auto, scroll u oculta para un bloque.
información breve
Designaciones
| Descripción | Ejemplo | |
|---|---|---|
| <тип> | Indica el tipo de valor. | <размер> |
| A && B | Los valores deben mostrarse en el orden indicado. | <размер> && <цвет> |
| A | si | Indica que solo se debe seleccionar uno de los valores sugeridos (A o B). | normal | letras minúsculas |
| A || si | Cada valor se puede utilizar solo o junto con otros en cualquier orden. | ancho || contar |
| Valores de grupos. | [cultivo || cruzar] | |
| * | Repita cero o más veces. | [,<время>]* |
| + | Repita una o más veces. | <число>+ |
| ? | El tipo, palabra o grupo especificado es opcional. | ¿recuadro? |
| (A, B) | Repita al menos A, pero no más de B veces. | <радиус>{1,4} |
| # | Repita una o más veces, separadas por comas. | <время># |
Los valores
clip El texto se recorta para ajustarse al área. puntos suspensivos El texto se trunca y se añade un punto suspensivo al final de la línea.
Ejemplo
El campo magnético extingue de manera insignificante el gran círculo de la esfera celeste, en cuyo caso aumentan las excentricidades e inclinaciones de las órbitas.
El resultado de este ejemplo se muestra en la Fig. 1.
Figura: 1. Puntos suspensivos al final del texto
Modelo de objeto
Un objeto.style.textOverflow
Nota
Opera antes de la versión 11 usa la propiedad -o-text-overflow.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: esta especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación candidata ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que está en línea con sus objetivos, pero se requiere la ayuda de la comunidad de desarrolladores para implementar el estándar.
- Recomendación propuesta ( Recomendación sugerida) - En este punto, el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura del borrador después de la discusión y revisión para la revisión de la comunidad.
- Borrador del editor ( Borrador editorial): una versión preliminar del estándar después de la edición por parte de los editores del proyecto.
- Sequía ( Proyecto de especificación) es el primer borrador de la norma.
Vlad Merzhevich
A pesar de que los monitores de 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 es más fácil a través de CSS, además, siempre puede mostrar el texto completo, por ejemplo, cuando pasa el mouse sobre él con el cursor del mouse. A continuación, consideraremos métodos de cómo cortar el texto con unas 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 cancelar 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 esto. Esto generalmente 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, pero el degradado en sí se agregará usando 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 usanza, 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 completo y resaltado 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 se ajusta por completo al á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.
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 supere 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 la compatibilidad con el navegador, 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 lo 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 otros.
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 herramienta principal para que los diseñadores web de todo el mundo creen sitios nunca antes vistos con un mínimo de código. Existen soluciones simples, literalmente 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.
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 vendrá a nuestro rescate. Es muy simple, mira.
Digamos que tenemos un bloque del catálogo con productos:
Aquí está su estructura:
Milagro Yudo el agente de suministro de energía es vespertino, misterioso, el arte. 20255-59Un 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 grandes? 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 (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 ; 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)
