Al diseñar, los webmasters periódicamente tienen una pregunta: ¿cómo se envolverá el texto? En la mayoría de los casos, el navegador maneja esta tarea por sí solo. Pero a veces hay que controlar este proceso, especialmente cuando se forman palabras y frases largas que, si se transfieren de forma incorrecta, pierden su significado.
propiedad de ajuste de palabra
En HTML, hay una etiqueta especial para separar líneas.
. Pero su uso demasiado frecuente se considera de mala educación entre los desarrolladores y, a menudo, indica falta de profesionalidad. Como prueba, imagine que tiene un logotipo y desea que cada letra comience en una nueva línea:
El resultado es un código engorroso y feo, del cual cualquier desarrollador sufrirá un choque cultural. ¿Y si desea que el logotipo se muestre horizontalmente en la versión de escritorio, pero verticalmente si el ancho de la pantalla es inferior a 550 px? Por lo tanto, utilice siempre hojas de estilo en cascada para personalizar la apariencia de los elementos. Además, con la ayuda de las herramientas CSS, los saltos de línea se realizan de forma más elegante. Al mismo tiempo, no hay marcado redundante, lo que solo reduce la velocidad de carga de las páginas.
La primera propiedad a tener en cuenta para el procesamiento de texto es el ajuste de línea. Toma tres valores: normal, break-all y keep-all. Solo necesita recordar romper todo para trabajar. Normal es el valor predeterminado y no tiene sentido especificarlo. Keep-all significa evitar saltos de línea en un documento CSS. Diseñado específicamente para caracteres chinos, japoneses y coreanos. Entonces, si no va a publicar un blog en ninguno de esos idiomas, no necesitará la función. Tampoco es compatible con el navegador Safari y los teléfonos móviles iOS.
Para asignar una nueva línea para cada letra al logotipo del ejemplo anterior usando CSS, debe escribir el siguiente código:
P( fuente: negrita 30 px Helvetica, sans-serif; ancho: 25 px; ajuste de línea: break-all; )
El ancho y el tamaño de la fuente se seleccionan de tal manera que haya suficiente espacio para una sola letra. Word-wrap con un valor de break-all le dice al navegador que ajuste la palabra en una nueva línea cada vez. Esta propiedad no puede llamarse insustituible. Pero será útil al diseñar pequeños bloques con texto, como campos de comentarios.
propiedad de espacio en blanco
Un error común que cometen los desarrolladores web novatos es tratar de editar texto con espacios o presionar la tecla Intro y luego preguntarse por qué sus esfuerzos no aparecen en la página. No importa cuántas veces presione "Enter", el navegador lo ignorará. Pero hay una manera de hacer que muestre el texto de la forma que desee y tenga en cuenta todos los espacios.
En un documento CSS, los saltos de línea, asignados con la propiedad de espacio en blanco, se pueden configurar para respetar los espacios o presionando la tecla Intro. Los espacios en blanco con un valor de línea previa harán que el navegador vea Enter en el texto.
Si cambia la prelínea a pre-envoltura en su código CSS, la línea envuelta incluirá espacios. Por el contrario, deshabilite cualquier ajuste configurando la propiedad de espacio en blanco en el texto con el valor nowrap:
#wrapper p( color: #FFF; relleno: 10px; fuente: negrita 16px Helvetica, sans-serif; espacio en blanco: nowrap; )
desbordamiento de texto
Otra herramienta útil para trabajar con texto es text-overflow. Además del ajuste de línea, la propiedad CSS permite recortar el contenido cuando el contenedor está lleno. Toma dos valores:
- clip - simplemente recorta el texto;
- puntos suspensivos: agrega puntos suspensivos.
Para que la propiedad funcione, el elemento también debe configurarse para evitar saltos de línea y desbordamiento con un valor oculto.
Breve información
versiones CSS
| css1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Descripción
La propiedad de espacio en blanco establece cómo mostrar espacios entre palabras. En circunstancias normales, cualquier cantidad de espacios en el código HTML se mostrarán como uno en una página web. La excepción es la etiqueta.
El texto colocado en este contenedor se muestra con todos los espacios tal como lo formateó el usuario. Entonces, el espacio en blanco imita cómo funciona la etiquetaPero a diferencia de esto, no cambia la fuente a monoespaciada.Sintaxis
espacio en blanco: normal | ahora rap | anterior | pre-línea | pre-envoltura | heredar
Valores
normal El texto en la ventana del navegador se muestra como de costumbre, los saltos de línea se configuran automáticamente. nowrap Los espacios se ignoran, los saltos de línea en el código HTML se ignoran, todo el texto se muestra en una línea; sin embargo, agregando la etiqueta
ajusta el texto en una nueva línea. pre El texto se muestra incluyendo todos los espacios y guiones tal como fueron agregados por el desarrollador en el código HTML. Si la línea es demasiado larga para caber en la ventana del navegador, se agregará una barra de desplazamiento horizontal. Los espacios previos a la línea no se tienen en cuenta en el texto, el texto se ajusta automáticamente a la siguiente línea si no cabe en el área especificada. ajuste previo Todos los espacios y guiones se conservan en el texto, pero si el ancho de la línea no cabe en el área especificada, el texto se ajustará automáticamente a la línea siguiente. heredar Hereda el valor del padre.El efecto de los valores en el texto se presenta en la Tabla. una.
HTML5 CSS2.1 IE Cr Op Sa Fx
espacio en blanco Ejemplo
El último teorema de Fermat
X norte+Y norte= Z norte
donde n es un entero > 2El resultado de este ejemplo se muestra en la Fig. una.
Arroz. 1. Aplicar la propiedad del espacio en blanco
modelo de objeto
documento.getElementById("elementID").style.whiteSpace
navegadores
Internet Explorer hasta la versión 7.0 inclusive no es compatible con los valores pre-line , pre-wrap y heredados. Para