LabEx
EntrarÚnete

Truncar texto con desbordamiento CSS

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, profundizaremos en el mundo de la programación CSS y aprenderemos cómo truncar texto que excede el ancho de una línea. Al utilizar la combinación de las propiedades overflow, white-space y text-overflow, podremos mostrar una elipsis al final del texto truncado. A través de este laboratorio, obtendremos una comprensión más profunda de cómo optimizar la visualización de texto en sitios web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Truncar texto

Se ha proporcionado ya index.html y style.css en la máquina virtual.

Para truncar texto que es más largo que una línea y agregar una elipsis al final, utiliza las siguientes propiedades CSS:

  • overflow: hidden para evitar que el texto desborde sus dimensiones
  • white-space: nowrap para evitar que el texto exceda una línea en altura
  • text-overflow: ellipsis para agregar una elipsis si el texto excede sus dimensiones
  • Especifica un width fijo para el elemento para saber cuándo mostrar una elipsis

Tenga en cuenta que este método solo funciona para elementos de una sola línea. Por ejemplo:

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio de Truncar texto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.