1. Pantalla omitida de una sola línea
En CSS, puede usar la propiedad de desbordamiento de texto y la propiedad de espacio en blanco para realizar la visualización omitida de texto demasiado largo. Aquí está cómo hacerlo:
Establezca el desbordamiento en oculto para ocultar el texto más allá de los límites del contenedor.
Establezca el espacio en blanco en nowrap para forzar que el texto aparezca en la misma línea.
Establezca el desbordamiento de texto en puntos suspensivos para mostrar puntos suspensivos.
el código se muestra a continuación:
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Este código se usa cuando el ancho del contenedor es limitado, el texto más allá del ancho del contenedor se ocultará y se mostrarán puntos suspensivos.
2. Visualización omitida de varias líneas
Si necesita mostrar varias líneas, puede establecer el desbordamiento en oculto, el espacio en blanco en normal y usar el atributo de altura máxima para limitar la altura del contenedor.
el código se muestra a continuación:
.ellipsis-multi-line {
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
max-height: 60px; /* 设置最大高度 */
}En este código, cuando la altura del contenido del texto supere los 60 px, el exceso se ocultará y se mostrarán puntos suspensivos.