puntos suspensivos de visualización de desbordamiento de texto de una sola línea CSS

16314010:

Puede utilizar propiedades en CSS text-overflowpara implementar puntos suspensivos desbordados en una sola línea de texto.

Los pasos de implementación específicos son los siguientes:

1. Primero, establezca el ancho del elemento que necesita mostrar los puntos suspensivos en un valor fijo o un ancho máximo.

    .ellipsis {
        width: 200px;
        /* 或者 */
        max-width: 200px;
    }

1. A continuación, utilice white-spaceatributos para forzar que el contenido del texto del elemento quepa en una sola línea, evitando saltos de línea.

    .ellipsis {
        white-space: nowrap;
    }

1. Luego, use overflowel atributo para ocultar el contenido de texto que exceda el ancho del elemento.

    .ellipsis {
        overflow: hidden;
    }

1. Finalmente, use text-overflowel atributo para mostrar contenido de texto que exceda el ancho del elemento como elipses.

    .ellipsis {
        text-overflow: ellipsis;
    }

El código completo se ve así:

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

De esta manera, los puntos suspensivos se pueden mostrar cuando el texto de una sola línea se desborda.