Cómo cambiar el ajuste de texto predeterminado con HTML y CSS

A diferencia del papel, las páginas web pueden casi infinitamente extenderse de lado. Por más impresionante que sea, no es algo que realmente necesitamos mientras leemos. Los navegadores envuelven texto dependiendo de la ancho del contenedor de texto y el ancho de la pantalla para que podamos ver todo el texto sin tener que desplazarnos mucho hacia los lados (solo hacia abajo).

Envase Es algo que los navegadores tienen en cuenta muchos factores, como el idioma del texto o la ubicación de la puntuación y los espacios; no solo empuje hacia abajo Lo que no cabe en el cuadro definido para el contenido del texto..

Aparte de la envoltura, los navegadores también cuidar los espacios; combinan múltiples espacios consecutivos en el código fuente en un solo espacio en la página renderizada, y también registran saltos de línea forzados antes de comenzar a trabajar en el ajuste.

Cuándo cambiar el ajuste de texto predeterminado

Eso es todo genial, y muy apreciado. Pero, podemos terminar fácilmente en circunstancias donde el comportamiento predeterminado del navegador no es lo que estamos buscando. Puede ser un titular que no debe ser envuelto o una palabra en un párrafo que mejor estar roto que descender una linea, dejando un espacio vacío de aspecto extraño al final de la línea.

También puede suceder que simplemente desesperadamente Necesitamos esos espacios conservados en nuestro texto., Sin embargo, el navegador sigue combinándolos en uno, lo que nos obliga a agregar múltiples en el código fuente.

Las preferencias de envoltura también podrían Cambia con el lenguaje y propósito del texto.. Un artículo de noticias en mandarín y un poema en francés no necesariamente tienen que ser envueltos de la misma manera.

Hay un buen número de propiedades CSS (y elementos HTML) que pueden Controlar la envoltura y los puntos de ruptura. y también Defina cómo se procesan los espacios y los saltos de línea antes de envolver..

Oportunidades de envoltura suave y roturas de envoltura suave

Los navegadores deciden dónde envolver un texto desbordado Dependiendo de los límites de las palabras, guiones, sílabas, puntuaciones, espacios y más. Estos lugares son todos llamados oportunidades de envoltura suave y cuando el navegador rompe el texto en uno de esos lugares, el salto se llama un rotura de envoltura suave.

La forma más sencilla de forzar un descanso extra Se puede hacer usando el buen viejo. elemento.

Espacio en blanco

Si está familiarizado con el espacio en blanco Propiedad de CSS Apuesto a que llegó a saberlo de la misma manera que muchos otros; mientras buscaba una manera de evitar el ajuste de texto. los nowrap valor de espacio en blanco hace exactamente eso.

sin embargo, el espacio en blanco la propiedad es algo más que envolver. En primer lugar, ¿qué es el espacio en blanco? Es un conjunto de caracteres espaciales. Cada espacio en el set. varía el uno del otro en longitud, dirección, o ambos.

Un tipico carácter único espacio horizontal Es lo que añadimos pulsando la barra espaciadora. La tecla Tab también añade una Espacio similar pero con mayor longitud.. La tecla Enter agrega un espacio vertical para iniciar una nueva linea, y en HTML agrega un espacio único irrompible a las páginas web. Así, hay muchos tipos de espacios que constituyen “espacio en blanco”.

Como mencioné al principio, los navegadores colapsar espacios múltiples (tanto horizontal como vertical) en la fuente en un solo espacio. Ellos también Considera estos personajes espaciales para oportunidades de envoltura. (lugares donde se puede envolver un texto) cuando se necesita un ajuste.

Y, son precisamente estas acciones del navegador las que podemos controlar con espacio en blanco. Tenga en cuenta que el espacio en blanco La propiedad no afecta a todo tipo de espacio., solo las mas frecuentes como el espacio simple horizontal regular, el espacio de tabulación y los avances de línea.

A continuación, puede ver una captura de pantalla de un texto de muestra que es Envuelto por el navegador para caber dentro de su contenedor.. El desbordamiento ocurre en la parte inferior del contenedor y el texto desbordado tiene un color diferente. Notarás la colapso de los espacios consecutivos en el codigo.

  UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola Ã¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola.

 .textContainer ancho: 500px; altura: 320px;

Despues de aplicar espacio en blanco: nowrap; Por regla general, el ajuste del texto cambia de la siguiente manera:

 .textContainer / *… * / white-space: nowrap;

los pre valor de espacio en blanco conserva todos los espacios en blanco y Previene el ajuste del texto.:

 .textContainer / *… * / white-space: pre;

los pre-envolver valor de espacio en blanco conserva todos los espacios en blanco y envuelve el texto:

 .textContainer / *… * / white-space: pre-wrap;

Finalmente, el pre línea valor de espacio en blanco conserva los espacios en blanco verticales como nuevas lineas y envuelve el texto:

 .textContainer / *… * / white-space: línea previa;

Saltos de palabras

Otra propiedad CSS importante que debe conocer para controlar el ajuste de texto es pausa de palabra. Puedes ver en todas las capturas de pantalla anteriores que el navegador Envuelto el texto antes de la palabra “Hola” en el lado derecho, más allá del cual el texto desbordado. El navegador no rompió la palabra.

Sin embargo, si usted Tiene que permitir la ruptura de letras en una palabra para que el texto se vea incluso en el lado derecho que necesita utilizar el Romper todo valor para el pausa de palabra propiedad:

 .textContainer / *… * / word-break: break-all;

los pausa de palabra La propiedad tiene un tercer valor además Romper todo y normal (Perteneciente a la ruptura de línea por defecto). los Mantener todo valor no permite romper palabras.

Es posible que no puedas ver el efecto de Mantener todo en inglés. Pero, en idiomas donde las letras en una palabra son unidades significativas por su cuenta, el navegador puede romper las palabras al ajustar, y esto puede evitarse usando Mantener todo.

Por ejemplo, el letras en palabras coreanas, inicialmente roto para envolver, se mantienen juntos cuando el espacio en blanco: mantener todo; se especifica la regla.

UNA¬AUTOMÓVIL CLUB BRITÁNICO¸UNAªUNA³¿???¥UNA¼ Ã-Â-Â¥¿??? Ã «Â ?? Â ?? Ã-Â ?? Â ??, Ã¬Â ?? Â Â Â Â ?? ?? ?? ??¬UNA½¿????????¡¿¿UNA?? Ã-Â ?? Â ?? Ã¬¿???-Ã¬¿??? ???¬AUTOMÓVIL CLUB BRITÁNICO¤. UNA¬¿10 ??? UNA¬Â ?? Â Â Â Â ?? ?? ?? ??¬UNA½¿??????? UNAªUNAµAUTOMÓVIL CLUB BRITÁNICO¬¿?? Ã-Â ?? Â ?? Ã¬¿??? ???ª¿¿AUTOMÓVIL CLUB BRITÁNICO?? 1997: ¿…? 3Ã¬¿¿AUTOMÓVIL CLUB BRITÁNICO?? 10 A¬AUTOMÓVIL CLUB BRITÁNICO¼AUTOMÓVIL CLUB BRITÁNICO¶Â ?? ???? ° ° 12Ã¬AUTOMÓVIL CLUB BRITÁNICO¼UNAªUNA¹AUTOMÓVIL CLUB BRITÁNICO¬UNA§¿¿UNA?? Ã «Â ???… Ã¬AUTOMÓVIL CLUB BRITÁNICO¼UNA¬¿¿AUTOMÓVIL CLUB BRITÁNICO?? AUTOMÓVIL CLUB BRITÁNICO§AUTOMÓVIL CLUB BRITÁNICO¬AUTOMÓVIL CLUB BRITÁNICO¸UNA¬UNA¦AUTOMÓVIL CLUB BRITÁNICO¬Â-Â ?? Ã¬¿¿AUTOMÓVIL CLUB BRITÁNICO?? UNA¬AUTOMÓVIL CLUB BRITÁNICO´AUTOMÓVIL CLUB BRITÁNICO¦UNA½Ã «Â ??? ?? Ã« Â ?? ???¤. UNA¬UNA§AUTOMÓVIL CLUB BRITÁNICOªUNA¸¿¿UNA?? Ã «Â ??? ± Ã« Â¡Â ?? Ã-Â ?? Â ?? Ã¬¿???-Ã¬¿??? ???¬AUTOMÓVIL CLUB BRITÁNICO¤. UNA¬AUTOMÓVIL CLUB BRITÁNICO´ Ã-Â ?? Â ?? Ã¬¿??? ???¬Â-Â ?? Ã¬¿??? ??????? UNA¬Â-Â… ÃªUNA³¿¿UNA?? UNA¬Â Â ?? Ã «Â ° Â ?? Ã¬¿¿AUTOMÓVIL CLUB BRITÁNICO?? UNA¬¿???¬UNA¸UNAªÂ ° Â ?? Ã «Â ?? ???¤UNA¬AUTOMÓVIL CLUB BRITÁNICO´ ¿???¨UNAª¿¿AUTOMÓVIL CLUB BRITÁNICO?? AUTOMÓVIL CLUB BRITÁNICOªUNA¨UNA¬AUTOMÓVIL CLUB BRITÁNICO¬ Ã «???¤UNA¬¿??? ???ªUNA³UNA¼ UNAªÂ ° Â ?? Ã¬¿¿AUTOMÓVIL CLUB BRITÁNICO?? AUTOMÓVIL CLUB BRITÁNICO¶AUTOMÓVIL CLUB BRITÁNICO¬AUTOMÓVIL CLUB BRITÁNICO¼AUTOMÓVIL CLUB BRITÁNICO¥UNA¼ Ã «???¤Ã «Â £ Â¹Ã «Â ??? ?? Ã« Â ?? ???¤.

 .textContainer / *… * / word-break: keep-all;

Esta propiedad podría soportar otro valor llamado palabra de descanso en el futuro. Ya veras como palabra de descanso Trabaja después, en el “Envoltura de desbordamiento” sección de este artículo.

Oportunidades para romper palabras

Los desarrolladores también pueden agregar oportunidades de ajuste dentro de las palabras, utilizando la Elemento HTML Si un navegador necesita envolver una cadena de texto, considerará el lugar donde está presente para una oportunidad de envoltura.

  UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hello¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola. UNA¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? Hola.

 .textContainer / *… * / white-space: pre-wrap;

Sin , El conjunto “Hola” palabra habría sido traducida en una nueva línea. Añadiendo Al código HTML, informamos al navegador que Está bien romper la palabra en ese punto para envolver, en caso de que sea necesario.

Guiones

los guiones La propiedad CSS es Otra forma de controlar los descansos entre letras. en una palabra. Tenemos un artículo separado sobre la separación de CSS si está interesado. En definitiva, la propiedad le permite crear oportunidades de envoltura a través de guiones.

Sus auto valor solicita al navegador que automáticamente guión y romper palabras cuando sea necesario mientras se envuelve. los manual valor obliga a los navegadores a envolver (si es necesario) en las oportunidades de separación añadidas por nosotros, como el carácter de guión (‐) o (guión suave). Si ninguna fue dado como valor habría sin envoltura cerca de guiones.

  casa azul casa azul casa azul casa azul casa azul casa azul casa azul casa azul casa azul casa azul.

 .textContainer / *… * / -webkit-hyphens: auto; -ms-guiones: auto; guiones: auto;

Envoltura de desbordamiento

los envoltura de desbordamiento La propiedad CSS controla si un el navegador puede romper palabras (o espacios conservados, apoyo para lo que podría suceder en un futuro próximo) en desbordamiento. Cuando el palabra de descanso se da valor para envoltura de desbordamiento, la palabra será roto en caso no se encuentran otras oportunidades de envoltura suave En la linea.

Tenga en cuenta que envoltura de desbordamiento también es conocido como ajuste de línea (son alias).

  bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse

 .textContainer / *… * / overflow-wrap: break-word;

Sin espacio entre las letras en el código HTML anterior (es decir, sin oportunidades de ajuste), el texto no se ajustó al principio y fue preservado como una sola palabra.

Sin embargo, cuando se otorgó el permiso para envolver el texto rompiendo palabras (es decir, palabra de descanso se le dio valor a envoltura de desbordamiento), la envoltura sucedió rompiendo toda la cadena donde fuera necesario.