Tutorial CSS: Propiedades de texto

Alineación de texto con text-align y direction

El control de la alineación del texto es uno de los aspectos fundamentales en el diseño web. CSS nos proporciona propiedades específicas que permiten manipular cómo se distribuye el texto dentro de sus contenedores, lo que resulta esencial para crear diseños legibles y estéticamente agradables.

La propiedad text-align

La propiedad text-align determina cómo se alinea horizontalmente el contenido de texto dentro de su elemento contenedor. Esta propiedad es heredable, lo que significa que los elementos hijos heredarán el valor establecido en su elemento padre.

Los valores principales que acepta son:

• left: Alinea el texto al borde izquierdo del contenedor (valor predeterminado en idiomas de izquierda a derecha).
• right: Alinea el texto al borde derecho del contenedor.
• center: Centra el texto horizontalmente dentro del contenedor.
• justify: Distribuye el texto de manera que ocupe todo el ancho disponible, ajustando los espacios entre palabras (similar a los periódicos).

Veamos ejemplos prácticos de cada uno:

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.align-justify {
  text-align: justify;
}

Aplicado a elementos HTML:

<p class="align-left">Este texto está alineado a la izquierda.</p>
<p class="align-right">Este texto está alineado a la derecha.</p>
<p class="align-center">Este texto está centrado.</p>
<p class="align-justify">Este texto está justificado. Cuando el texto está justificado, se ajustan los espacios entre palabras para que cada línea tenga el mismo ancho, creando márgenes rectos en ambos lados.</p>

Consideraciones sobre text-justify

Cuando utilizamos text-align: justify, CSS también nos ofrece la propiedad complementaria text-justify que controla el algoritmo de justificación:

.justify-inter-word {
  text-align: justify;
  text-justify: inter-word; /* Ajusta espacios entre palabras (valor por defecto) */
}

.justify-inter-character {
  text-align: justify;
  text-justify: inter-character; /* Ajusta espacios entre caracteres (útil para idiomas asiáticos) */
}

La propiedad direction

La propiedad direction define la dirección del texto y es especialmente útil para trabajar con idiomas que se escriben de derecha a izquierda (RTL), como el árabe o el hebreo. Esta propiedad afecta no solo al texto, sino también a otros elementos como tablas.

Los valores principales son:

• ltr: De izquierda a derecha (Left To Right) - valor predeterminado
• rtl: De derecha a izquierda (Right To Left)

.text-ltr {
  direction: ltr;
}

.text-rtl {
  direction: rtl;
}

Ejemplo de aplicación:

<p class="text-ltr">Este texto se muestra de izquierda a derecha (predeterminado).</p>
<p class="text-rtl">هذا النص يظهر من اليمين إلى اليسار (árabe)</p>

Combinando direction con unicode-bidi

Para un control más preciso de la dirección del texto, especialmente en contenido mixto, la propiedad direction suele combinarse con unicode-bidi:

.bidi-override {
  direction: rtl;
  unicode-bidi: bidi-override; /* Fuerza la dirección especificada */
}

.bidi-embed {
  direction: rtl;
  unicode-bidi: embed; /* Crea un nuevo contexto de dirección */
}

Alineación en contextos específicos

La alineación de texto también puede aplicarse a contextos específicos como tablas o elementos de formulario:

/* Alineación en celdas de tabla */
td.price {
  text-align: right; /* Común para valores numéricos */
}

/* Alineación en encabezados */
h1, h2, h3 {
  text-align: center;
}

/* Alineación en botones */
button.action {
  text-align: center;
}

Soporte para writing-mode

La propiedad text-align funciona en conjunto con writing-mode, que determina si el texto fluye horizontal o verticalmente:

.vertical-text {
  writing-mode: vertical-rl;
  text-align: center; /* Centra el texto en el eje horizontal (que ahora es vertical) */
}

Casos prácticos de uso

La alineación de texto tiene diferentes aplicaciones según el contexto del diseño:

• Párrafos largos: Generalmente se usa text-align: left o justify para facilitar la lectura.
• Títulos y encabezados: A menudo se centran con text-align: center para destacarlos.
• Información numérica: En tablas, los números suelen alinearse a la derecha con text-align: right.
• Citas o testimonios: Pueden destacarse con text-align: center.
• Contenido multilingüe: Usar direction: rtl para idiomas como árabe o hebreo.

Ejemplo de una tarjeta de producto

Veamos un ejemplo práctico de cómo aplicar estas propiedades en un componente común:

.product-card {
  width: 300px;
  border: 1px solid #ddd;
  padding: 15px;
}

.product-title {
  text-align: center;
  font-weight: bold;
}

.product-description {
  text-align: justify;
}

.product-price {
  text-align: right;
  font-size: 1.2em;
  color: #e44d26;
}

Este estilo crearía una tarjeta de producto con el título centrado, la descripción justificada y el precio alineado a la derecha, creando una jerarquía visual clara y agradable.

Consideraciones de diseño responsivo

En diseños responsivos, a veces necesitamos cambiar la alineación según el tamaño de pantalla:

.header-title {
  text-align: center; /* Centrado por defecto */
}

@media (max-width: 768px) {
  .header-title {
    text-align: left; /* Alineado a la izquierda en dispositivos móviles */
  }
}

La correcta aplicación de text-align y direction mejora significativamente la legibilidad y la estructura visual de nuestros diseños web, adaptándose a diferentes contextos e idiomas.

Espaciado con line-height, letter-spacing y word-spacing

El control del espaciado del texto es un aspecto fundamental en el diseño web que afecta directamente a la legibilidad y estética de nuestro contenido. CSS nos ofrece tres propiedades principales para gestionar los diferentes tipos de espaciado en el texto: entre líneas, entre letras y entre palabras.

Espaciado entre líneas con line-height

La propiedad line-height controla la altura de cada línea de texto, determinando el espacio vertical entre líneas. Esta propiedad es especialmente importante para la legibilidad de párrafos y bloques de texto extensos.

Podemos definir el valor de line-height de varias formas:

• Con un número (recomendado): actúa como multiplicador del tamaño de fuente
• Con una unidad de longitud: px, em, rem, etc.
• Con un porcentaje: relativo al tamaño de fuente

p {
  font-size: 16px;
  line-height: 1.5; /* 1.5 veces el tamaño de la fuente (24px) */
}

h1 {
  font-size: 32px;
  line-height: 1.2; /* 1.2 veces el tamaño de la fuente (38.4px) */
}

.small-text {
  font-size: 14px;
  line-height: 20px; /* Valor fijo en píxeles */
}

.percentage-example {
  font-size: 18px;
  line-height: 150%; /* 150% del tamaño de la fuente (27px) */
}

La forma más recomendada es usar un número sin unidades (como 1.5), ya que este valor se hereda como proporción y no como valor absoluto, lo que facilita mantener proporciones consistentes en todo el diseño.

Aplicaciones prácticas de line-height

• Para texto de párrafos, un valor entre 1.4 y 1.6 suele ofrecer buena legibilidad
• Para títulos, valores entre 1.1 y 1.3 funcionan mejor
• Para interfaces de usuario compactas, valores más bajos como 1.2
• Para mejorar la accesibilidad, valores más altos como 1.5 o 1.6

body {
  line-height: 1.5; /* Base para todo el documento */
}

h1, h2, h3 {
  line-height: 1.2; /* Más compacto para títulos */
}

.card-description {
  font-size: 14px;
  line-height: 1.4; /* Equilibrio entre espacio y compacidad */
}

.terms-conditions {
  font-size: 12px;
  line-height: 1.6; /* Mayor espaciado para texto pequeño */
}

Espaciado entre letras con letter-spacing

La propiedad letter-spacing controla el espacio horizontal entre caracteres (también conocido como tracking en tipografía). Esta propiedad es útil para ajustar la densidad visual del texto y mejorar la legibilidad, especialmente en títulos o texto en mayúsculas.

h1 {
  letter-spacing: 1px; /* Añade 1px entre cada letra */
}

.tight-text {
  letter-spacing: -0.5px; /* Reduce el espacio entre letras */
}

.spaced-text {
  letter-spacing: 0.2em; /* Espaciado proporcional al tamaño de fuente */
}

.all-caps {
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Mejora la legibilidad del texto en mayúsculas */
}

Casos de uso para letter-spacing

• Títulos grandes: Un ligero espaciado positivo mejora la legibilidad
• Texto en mayúsculas: Necesita más espaciado para compensar su densidad visual
• Logotipos y marcas: Ajustar el espaciado para efectos estéticos específicos
• Texto pequeño: Un espaciado ligeramente mayor puede mejorar la legibilidad

.logo-text {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.legal-text {
  font-size: 11px;
  letter-spacing: 0.05em; /* Mejora la legibilidad del texto pequeño */
}

.hero-title {
  font-size: 48px;
  letter-spacing: -0.02em; /* Ligeramente más compacto para títulos grandes */
}

Espaciado entre palabras con word-spacing

La propiedad word-spacing controla el espacio horizontal entre palabras. A diferencia de letter-spacing que afecta al espacio entre caracteres, word-spacing solo afecta al espacio entre palabras completas.

p {
  word-spacing: 2px; /* Añade 2px adicionales entre palabras */
}

.condensed-text {
  word-spacing: -1px; /* Reduce el espacio entre palabras */
}

.expanded-text {
  word-spacing: 0.2em; /* Aumenta el espacio proporcionalmente */
}

Aplicaciones de word-spacing

• Texto justificado: Puede ayudar a equilibrar los espacios cuando se usa text-align: justify
• Efectos estéticos: Para crear estilos específicos en títulos o elementos destacados
• Mejora de legibilidad: En algunos casos, un ligero aumento puede mejorar la lectura

.justified-text {
  text-align: justify;
  word-spacing: 0.05em; /* Ayuda a equilibrar el espaciado en texto justificado */
}

.quote {
  font-style: italic;
  word-spacing: 0.1em; /* Espaciado ligeramente mayor para citas */
}

Combinando las propiedades de espaciado

Las tres propiedades de espaciado pueden combinarse para lograr un control preciso sobre la apariencia del texto:

.refined-text {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  word-spacing: 0.05em;
}

.compact-heading {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-spacing: -0.01em;
}

Ejemplo práctico: Tarjeta de producto

Veamos cómo aplicar estas propiedades en un componente real:

.product-card {
  max-width: 300px;
  padding: 20px;
  border: 1px solid #eee;
}

.product-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.01em; /* Ligeramente más compacto */
}

.product-category {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Más espaciado para texto en mayúsculas */
  color: #666;
}

.product-description {
  font-size: 15px;
  line-height: 1.5; /* Buena legibilidad para párrafos */
  margin: 15px 0;
}

.product-price {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.02em; /* Ligero espaciado para destacar */
}

Consideraciones para diseño responsivo

En diseños responsivos, podemos ajustar el espaciado según el tamaño de pantalla:

p {
  line-height: 1.6;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  p {
    line-height: 1.5; /* Ligeramente más compacto en móviles */
    letter-spacing: normal; /* Valor predeterminado en pantallas pequeñas */
  }
  
  h1 {
    line-height: 1.1; /* Más compacto para títulos en móviles */
  }
}

Consideraciones de rendimiento y accesibilidad

• Accesibilidad: Un line-height adecuado (mínimo 1.5 para texto principal) mejora la legibilidad para personas con dificultades de lectura
• Rendimiento: Estas propiedades tienen un impacto mínimo en el rendimiento
• Consistencia: Mantener valores coherentes en todo el sitio mejora la experiencia de usuario

El control preciso del espaciado mediante line-height, letter-spacing y word-spacing nos permite crear diseños más refinados y legibles, adaptados a las necesidades específicas de nuestro contenido y audiencia.

Transformación de texto: text-transform y text-decoration

Las propiedades de transformación de texto en CSS nos permiten modificar la apariencia del texto sin cambiar el contenido HTML original. Estas propiedades son especialmente útiles para aplicar estilos consistentes y mejorar la presentación visual de nuestros textos.

La propiedad text-transform

La propiedad text-transform controla la capitalización del texto, permitiéndonos convertir texto a mayúsculas, minúsculas o capitalizar la primera letra de cada palabra, independientemente de cómo esté escrito en el HTML.

Los valores principales que acepta son:

• none: No aplica ninguna transformación (valor predeterminado).
• uppercase: Convierte todo el texto a MAYÚSCULAS.
• lowercase: Convierte todo el texto a minúsculas.
• capitalize: Convierte la primera letra de cada palabra a mayúscula.
• full-width: Transforma los caracteres para que ocupen el ancho completo (principalmente usado en textos asiáticos).

Veamos ejemplos prácticos:

.normal {
  text-transform: none;
}

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

.cap {
  text-transform: capitalize;
}

Aplicado a elementos HTML:

<p class="normal">Texto sin transformar</p>
<p class="upper">esto aparecerá en mayúsculas</p>
<p class="lower">ESTO APARECERÁ EN MINÚSCULAS</p>
<p class="cap">cada palabra tendrá la primera letra en mayúscula</p>

Casos de uso comunes para text-transform

• Encabezados y títulos: Usar uppercase para crear énfasis visual o capitalize para un estilo más tradicional.
• Navegación y botones: Aplicar uppercase para dar un aspecto más formal y estructurado.
• Etiquetas y categorías: Usar uppercase para destacar etiquetas cortas.
• Citas y testimonios: Mantener none para preservar la intención original del texto.

/* Estilo para un menú de navegación */
.nav-link {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* Estilo para un botón de acción */
.btn-primary {
  text-transform: uppercase;
  font-weight: bold;
}

/* Estilo para un título de sección */
.section-title {
  text-transform: capitalize;
  font-size: 24px;
}

/* Estilo para etiquetas */
.tag {
  text-transform: uppercase;
  font-size: 12px;
  background-color: #eee;
  padding: 3px 8px;
  border-radius: 3px;
}

La propiedad text-decoration

La propiedad text-decoration controla la decoración del texto, como subrayados, tachados o líneas sobre el texto. Esta propiedad es especialmente útil para enlaces, texto enfatizado o indicar texto obsoleto.

Los valores principales son:

• none: Sin decoración (elimina el subrayado predeterminado de los enlaces).
• underline: Añade una línea debajo del texto.
• overline: Añade una línea sobre el texto.
• line-through: Añade una línea a través del texto (tachado).

.no-decoration {
  text-decoration: none;
}

.underlined {
  text-decoration: underline;
}

.overlined {
  text-decoration: overline;
}

.strikethrough {
  text-decoration: line-through;
}

Ejemplo de aplicación:

<a href="#" class="no-decoration">Enlace sin subrayado</a>
<p class="underlined">Texto subrayado para énfasis</p>
<p class="overlined">Texto con línea superior</p>
<p class="strikethrough">Texto obsoleto o tachado</p>

Propiedades específicas de text-decoration

En CSS moderno, text-decoration se ha dividido en propiedades más específicas para un control más preciso:

• text-decoration-line: Define el tipo de línea (underline, overline, line-through).
• text-decoration-color: Define el color de la línea.
• text-decoration-style: Define el estilo de la línea (solid, double, dotted, dashed, wavy).
• text-decoration-thickness: Define el grosor de la línea.

.custom-underline {
  text-decoration-line: underline;
  text-decoration-color: #ff6b6b;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* Forma abreviada */
.custom-underline-shorthand {
  text-decoration: underline wavy #ff6b6b 2px;
}

Combinando múltiples decoraciones

Podemos combinar varios valores de text-decoration-line para aplicar múltiples decoraciones simultáneamente:

.multiple-decorations {
  text-decoration-line: underline overline;
}

Casos de uso comunes para text-decoration

• Enlaces: Personalizar o eliminar el subrayado predeterminado.
• Texto obsoleto: Usar line-through para indicar contenido desactualizado.
• Énfasis especial: Usar decoraciones para destacar información importante.
• Efectos de hover: Cambiar la decoración al pasar el cursor sobre elementos interactivos.

/* Estilo personalizado para enlaces */
a {
  text-decoration: none;
  color: #0066cc;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
}

/* Precio con descuento */
.original-price {
  text-decoration: line-through;
  color: #999;
}

/* Destacar términos importantes */
.highlight-term {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #ff6b6b;
}

/* Texto obsoleto */
.deprecated {
  text-decoration: line-through;
  color: #999;
}

Combinando text-transform y text-decoration

Estas propiedades pueden combinarse para crear estilos más elaborados:

.important-button {
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  background-color: #0066cc;
  color: white;
  border-radius: 4px;
}

.important-button:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.featured-tag {
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: #ff6b6b;
  font-size: 12px;
  font-weight: bold;
}

Ejemplo práctico: Tarjeta de producto con oferta

Veamos un ejemplo completo que utiliza ambas propiedades:

.product-card {
  width: 300px;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
}

.product-category {
  text-transform: uppercase;
  font-size: 12px;
  color: #666;
  letter-spacing: 0.05em;
}

.product-title {
  font-size: 18px;
  margin: 10px 0;
}

.product-price {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  margin-right: 10px;
}

.discount-label {
  text-transform: uppercase;
  background-color: #ff6b6b;
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}

.product-link {
  text-decoration: none;
  color: #0066cc;
  display: inline-block;
  margin-top: 15px;
}

.product-link:hover {
  text-decoration: underline;
}

HTML correspondiente:

<div class="product-card">
  <div class="product-category">Electrónica</div>
  <h3 class="product-title">Auriculares inalámbricos premium</h3>
  <div class="product-pricing">
    <span class="original-price">$129.99</span>
    <span class="product-price">$99.99</span>
    <span class="discount-label">Oferta</span>
  </div>
  <a href="#" class="product-link">Ver detalles</a>
</div>

Consideraciones de accesibilidad

• Enlaces: Evitar eliminar el subrayado sin proporcionar otra indicación visual clara de que el texto es un enlace.
• Contraste: Asegurar que el texto transformado mantiene suficiente contraste con el fondo.
• Legibilidad: El texto en mayúsculas (uppercase) puede ser más difícil de leer en párrafos largos.

/* Mejor enfoque para enlaces */
a {
  text-decoration: underline; /* Mantiene la accesibilidad */
  text-decoration-thickness: 1px; /* Más sutil pero visible */
  text-decoration-color: rgba(0, 102, 204, 0.5); /* Semi-transparente */
  color: #0066cc;
}

a:hover, a:focus {
  text-decoration-thickness: 2px;
  text-decoration-color: #0066cc;
}

Las propiedades text-transform y text-decoration son herramientas poderosas para mejorar la presentación visual y la jerarquía de información en nuestros diseños web, permitiéndonos crear interfaces más expresivas y funcionales sin modificar el contenido HTML original.

Control de texto con text-indent, white-space y word-break

El control preciso del comportamiento del texto es fundamental para crear diseños web profesionales y legibles. CSS nos ofrece propiedades específicas que permiten manipular cómo se comporta el texto dentro de sus contenedores, más allá de la simple alineación o espaciado. Estas propiedades nos ayudan a gestionar la sangría, los espacios en blanco y los saltos de palabras.

La propiedad text-indent

La propiedad text-indent permite establecer la sangría de la primera línea de un bloque de texto. Esta propiedad es especialmente útil para mejorar la legibilidad de párrafos largos o para crear efectos visuales específicos.

p {
  text-indent: 2em; /* Sangría de 2em en la primera línea */
}

.negative-indent {
  text-indent: -20px; /* Sangría negativa (hacia la izquierda) */
  padding-left: 20px; /* Compensación para evitar recorte */
}

La sangría puede definirse con cualquier unidad de longitud (px, em, rem, etc.) o con porcentajes. Usar unidades relativas como em es recomendable ya que se adaptan al tamaño de la fuente.

Casos de uso para text-indent

• Párrafos de texto: Una sangría de 1.5em o 2em mejora la legibilidad en textos largos.
• Listas personalizadas: Crear sangrías negativas para posicionar marcadores de lista fuera del flujo.
• Técnica de texto oculto: Usar valores extremadamente negativos junto con overflow: hidden para ocultar texto visualmente pero mantenerlo accesible para lectores de pantalla.

/* Párrafos con sangría tradicional */
.article p {
  text-indent: 1.5em;
}

/* Lista personalizada con sangría negativa */
.custom-list li {
  text-indent: -1.5em;
  padding-left: 1.5em;
  list-style-type: none;
}

/* Técnica para ocultar texto visualmente (accesibilidad) */
.visually-hidden {
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}

La propiedad white-space

La propiedad white-space controla cómo se manejan los espacios en blanco y los saltos de línea dentro de un elemento. Esta propiedad es crucial para controlar el comportamiento del texto cuando contiene múltiples espacios o saltos de línea.

Los valores principales son:

• normal: Comportamiento predeterminado. Colapsa múltiples espacios en uno solo y realiza saltos automáticos.
• nowrap: Colapsa espacios pero evita los saltos de línea automáticos (todo en una sola línea).
• pre: Preserva espacios y saltos de línea exactamente como están en el código HTML (similar a la etiqueta <pre>).
• pre-wrap: Preserva espacios y saltos de línea, pero permite saltos automáticos si es necesario.
• pre-line: Colapsa espacios pero preserva saltos de línea, permitiendo también saltos automáticos.

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Añade puntos suspensivos al texto truncado */
}

.preserve {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}

Veamos ejemplos prácticos:

<div class="normal">Este    texto    tendrá    espacios    colapsados    y    saltos automáticos.</div>

<div class="nowrap">Este texto no tendrá saltos automáticos y se extenderá en una sola línea, posiblemente fuera del contenedor.</div>

<div class="preserve">Este    texto    preservará    todos    los    espacios
y    saltos
de    línea    exactamente    como    están    escritos.</div>

<div class="pre-wrap">Este    texto    preservará    espacios    pero    
permitirá    saltos    automáticos    si    es    necesario.</div>

<div class="pre-line">Este    texto    colapsará    espacios
pero    respetará    los    saltos
de    línea    del    código.</div>

Aplicaciones prácticas de white-space

• Truncar texto con elipsis: Combinando white-space: nowrap con overflow: hidden y text-overflow: ellipsis.
• Bloques de código: Usar white-space: pre o pre-wrap para mostrar código con formato preservado.
• Mensajes o comentarios: Usar white-space: pre-line para respetar los saltos de línea del usuario.

/* Truncar texto con elipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Bloque de código */
.code-block {
  white-space: pre;
  font-family: monospace;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto; /* Permite desplazamiento horizontal */
}

/* Comentario de usuario */
.user-comment {
  white-space: pre-line;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
}

La propiedad word-break

La propiedad word-break controla cómo se producen los saltos de línea dentro de las palabras cuando el texto alcanza el final de su contenedor. Esta propiedad es especialmente útil para manejar textos en diferentes idiomas o palabras muy largas.

Los valores principales son:

• normal: Comportamiento predeterminado según el idioma.
• break-all: Permite romper palabras en cualquier carácter para evitar desbordamiento.
• keep-all: Evita romper palabras (útil para idiomas asiáticos).
• break-word: Permite romper palabras solo cuando es necesario (valor obsoleto, usar overflow-wrap: break-word en su lugar).

.normal-break {
  word-break: normal;
}

.break-all {
  word-break: break-all;
}

.keep-all {
  word-break: keep-all;
}

La propiedad relacionada overflow-wrap

Complementaria a word-break, la propiedad overflow-wrap (anteriormente llamada word-wrap) controla si el navegador puede romper palabras cuando su longitud excede el ancho del contenedor:

• normal: Solo rompe en puntos permitidos (espacios, guiones).
• break-word: Permite romper palabras para evitar desbordamiento, pero solo cuando es necesario.
• anywhere: Similar a break-word pero con diferencias sutiles en cómo afecta al algoritmo de diseño.

.overflow-normal {
  overflow-wrap: normal;
}

.overflow-break-word {
  overflow-wrap: break-word;
}

Diferencias entre word-break y overflow-wrap

• word-break: break-all rompe palabras en cualquier carácter, incluso cuando no es necesario.
• overflow-wrap: break-word solo rompe palabras cuando es necesario para evitar desbordamiento.

/* Comparación de comportamientos */
.container {
  width: 150px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.break-all-example {
  word-break: break-all;
}

.break-word-example {
  overflow-wrap: break-word;
}

HTML correspondiente:

<div class="container normal-break">
  Supercalifragilisticoespialidoso es una palabra muy larga.
</div>

<div class="container break-all-example">
  Supercalifragilisticoespialidoso es una palabra muy larga.
</div>

<div class="container break-word-example">
  Supercalifragilisticoespialidoso es una palabra muy larga.
</div>

Combinando las propiedades para un control preciso

Estas propiedades pueden combinarse para lograr un control detallado sobre cómo se comporta el texto:

.content-box {
  width: 300px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  
  /* Control de texto */
  text-indent: 1.5em;
  white-space: pre-line;
  overflow-wrap: break-word;
}

Ejemplo práctico: Tarjeta de producto con descripción

Veamos un ejemplo completo que utiliza estas propiedades:

.product-card {
  width: 280px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-description {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin: 10px 0;
  
  /* Primera línea con sangría */
  text-indent: 1em;
  
  /* Manejo de palabras largas */
  overflow-wrap: break-word;
}

.product-specs {
  font-family: monospace;
  font-size: 13px;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
  
  /* Preservar formato pero permitir saltos */
  white-space: pre-wrap;
}

.product-code {
  font-size: 12px;
  color: #999;
  
  /* Evitar que se rompa el código de producto */
  white-space: nowrap;
}

HTML correspondiente:

<div class="product-card">
  <h3 class="product-title">Auriculares inalámbricos con cancelación de ruido activa</h3>
  <p class="product-description">Estos auriculares premium ofrecen una experiencia de audio inmersiva con tecnología de cancelación de ruido avanzada y una batería de larga duración.</p>
  <div class="product-specs">Especificaciones:
- Bluetooth 5.0
- Batería: 30h
- Cancelación de ruido: Sí
- Resistencia al agua: IPX4</div>
  <div class="product-code">REF: AUR-NC-2023-BLK</div>
</div>

Consideraciones para diseño responsivo

En diseños responsivos, podemos ajustar estas propiedades según el tamaño de pantalla:

.article p {
  text-indent: 2em;
}

@media (max-width: 768px) {
  .article p {
    text-indent: 1em; /* Sangría más pequeña en móviles */
  }
  
  .product-title {
    white-space: normal; /* Permitir saltos en títulos en pantallas pequeñas */
  }
}

Consideraciones de accesibilidad

• Legibilidad: Una sangría adecuada mejora la legibilidad, pero valores excesivos pueden dificultar la lectura.
• Truncamiento: Al usar text-overflow: ellipsis, asegúrate de que el contenido completo sea accesible de alguna forma (por ejemplo, mediante un tooltip).
• Contraste y espaciado: Mantener suficiente contraste y espaciado para facilitar la lectura.

Las propiedades text-indent, white-space y word-break nos proporcionan un control preciso sobre cómo se comporta el texto en nuestros diseños web. Dominar estas propiedades nos permite crear interfaces más refinadas y profesionales, mejorando tanto la estética como la usabilidad de nuestros proyectos.