Inicio

HerramientasBlog

COMPONENTS


Generador de Rotura de Palabras CSSBETA

Configuración

Espacio en Blanco

Clase

Vista previa

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Código

Generador de Rotura de Palabras CSS

En CSS, la propiedad word-break se usa para controlar cómo se rompen y ajustan las palabras dentro de un elemento HTML cuando exceden el ancho del elemento. Esta propiedad es particularmente útil para manejar palabras largas o cadenas de caracteres en idiomas sin espacios, como el chino o el japonés.

La propiedad word-break puede tomar los siguientes valores:

normal (predeterminado): Las palabras pueden romperse en sus puntos de ruptura regulares.

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

keep-all: Las palabras no se rompen, incluso si exceden el ancho del elemento. Esto es adecuado para idiomas donde los cortes de palabras deben mantenerse al mínimo.

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

Aquí hay un ejemplo de cómo usar la propiedad word-break para permitir que las palabras se rompan en cualquier carácter:

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

También puedes aplicar múltiples decoraciones de texto especificándolas como valores separados por espacios en la propiedad text-decoration. Por ejemplo, para subrayar y sobrealinear el texto simultáneamente:

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

En este ejemplo:

  • La clase .break-all-word-break usa la propiedad word-break para permitir que las palabras se rompan en cualquier carácter, lo cual puede ser útil para idiomas con delimitadores de palabras no espaciales o cuando se manejan URLs largas.

La propiedad word-break es esencial para manejar el diseño del texto y la ruptura de líneas en idiomas con reglas únicas de ruptura de palabras y puede ayudar a mejorar la legibilidad y el diseño del contenido textual en diversos escenarios.


Herramientas destacadas

Hub de Código
Paleta de ColoresNUEVO
Generador de Contraseñas SegurasSelector de ColoresVerificador de Nombres de Usuario en Redes Sociales

Seleccionar idioma

Establecer tema

© 2024 ReadyTools. Todos los derechos reservados.