8.1 Propiedad text-overflow
El flujo de texto y la gestión de su visualización son aspectos importantes del diseño web, especialmente al trabajar con líneas de texto largas o contenedores de tamaño limitado. Las propiedades text-overflow, white-space y word-wrap (ahora conocido como overflow-wrap) permiten controlar cómo el texto se comporta en tales situaciones.
La propiedad text-overflow gestiona cómo se muestra el texto que se sale de los límites del contenedor. Se utiliza en combinación con las propiedades white-space y overflow para crear un efecto de recorte del texto y añadir puntos suspensivos.
Valores:
clip: recorta el texto que se sale de los límites del contenedorellipsis: añade puntos suspensivos (...) al final del texto recortado
Ejemplo de uso:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Este texto será recortado en el límite del contenedor.</div>
<div class="container ellipsis">Este texto será recortado y reemplazado con puntos suspensivos.</div>
</body>
8.2 Propiedad white-space
La propiedad white-space gestiona el manejo de los caracteres de espacio y el salto de texto. Permite definir cómo se gestionan los espacios, tabulaciones y nuevas líneas en el texto.
Valores:
normal: los espacios y los saltos de línea se manejan normalmente (por defecto)nowrap: el texto se muestra en una sola línea, sin saltospre: los espacios y los saltos de línea se preservan, como en el tag de HTML<pre>pre-wrap: los espacios y los saltos de línea se preservan, pero el texto puede saltar a una nueva línea si es necesariopre-line: los saltos de línea se preservan, pero los espacios se manejan como de costumbrebreak-spaces: los espacios y los saltos de línea se preservan, y los espacios largos pueden causar saltos de línea
Ejemplo de uso:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Este texto se moverá a la siguiente línea si no hay espacio suficiente.</div>
<div class="nowrap">Este texto no se moverá a la siguiente línea y se mostrará en una sola línea.</div>
<div class="pre">
Este texto preservará
todos los espacios y saltos de línea.
</div>
<div class="pre-wrap">
Este texto se moverá a la siguiente línea, pero también preservará
todos los espacios y saltos de línea.
</div>
</body>
8.3 Propiedad overflow-wrap
La propiedad overflow-wrap (anteriormente conocida como word-wrap) gestiona el salto de palabras que se salen de los límites del contenedor. Permite evitar el desbordamiento del contenedor con palabras demasiado largas que no pueden ser divididas.
Valores
normal: el salto de palabras se realiza según las reglas estándar de saltobreak-word: el salto de palabras se realiza, incluso si para ello hay que dividir la palabra en partes
Ejemplo de uso:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Este texto se moverá a la siguiente línea si no hay espacio suficiente.</div>
<div class="container break-word">EstaPalabramuylargaNOsellevaalasiguientelíneasiNOhayespacio.</div>
</body>
Explicación del código:
overflow-wrap: normal;: el salto de palabras se realiza según las reglas estándar, sin dividir palabrasoverflow-wrap: break-word;: las palabras largas se dividirán y saltarán a la siguiente línea si es necesario
8.4 Uso conjunto de las propiedades
Las propiedades text-overflow, white-space y word-wrap a menudo se usan juntas para lograr el efecto de visualización de texto deseado en contenedores de tamaño limitado.
Ejemplo de uso:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Este texto será recortado y reemplazado con puntos suspensivos si no hay suficiente espacio en el contenedor.</div>
</body>
Explicación del código:
white-space: nowrap;: el texto se muestra en una sola línea, sin saltooverflow: hidden;: oculta el texto que se sale de los límites del contenedortext-overflow: ellipsis;: añade puntos suspensivos al final del texto recortadooverflow-wrap: break-word;: divide y mueve palabras largas a la siguiente línea si no hay suficiente espacio
GO TO FULL VERSION