¿Cómo implementar el estilo de omisión de desbordamiento de texto de una o varias líneas?

I. Introducción

En la página de visualización de desarrollo diario, si la cantidad de un fragmento de texto es demasiado larga, es posible que no se muestre completamente debido al ancho del elemento. Para mejorar la experiencia del usuario, debemos mostrar el texto desbordado como un puntos suspensivos en este momento.

Para el desbordamiento de texto, podemos dividirlo en dos formas:

Desbordamiento de texto de una sola línea
Desbordamiento de texto de varias líneas

2. Método de implementación

Omisión de desbordamiento de texto de una sola línea

La comprensión también es muy simple, es decir, el texto se muestra en una línea y el exceso se muestra en forma de elipses.

La implementación también es muy simple: los atributos CSS involucrados son:

text-overflow : especifica que cuando el texto se desborda, se muestra un símbolo de puntos suspensivos para representar el texto recortado.
espacio en blanco : configura el texto para que se muestre en una línea y no puede ajustar líneas.
desbordamiento : si la longitud del texto excede el ancho limitado, el contenido sobrante se ocultará.

El desbordamiento está configurado en oculto , generalmente se usa para ocultar elementos de desbordamiento internos en la capa externa de elementos a nivel de bloque, o se puede usar con los dos atributos siguientes para lograr la omisión de desbordamiento de texto.

white-space:nowrap , la función es establecer el texto sin ajuste de línea, que es la base para overflow:hidden y text-overflow : ellipsis para que surta efecto

Los valores del atributo de desbordamiento de texto son los siguientes:

clip : cuando el texto del objeto se desborda, se recorta
puntos suspensivos : muestra una marca de puntos suspensivos (...) cuando el texto dentro del objeto se desborda

text-overflow solo puede tener efecto cuando se configuran overflow:hidden y white-space:nowrap .

Por ejemplo

<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

<style>
    p{
    
    
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

como sigue:

Insertar descripción de la imagen aquí

Omisión de desbordamiento de texto de varias líneas

Cuando el texto de varias líneas se desborda, podemos dividirlo en dos situaciones:

Truncado según la altura
Truncar según el número de fila

Truncado según la altura

Pseudo elemento + posicionamiento

La estructura principal del código CSS es la siguiente:

posición: relativa: Posición absoluta del pseudoelemento
overflow: oculto: el texto desborda el ancho limitado y el contenido está oculto)
posición: absoluta: posición absoluta de los puntos suspensivos
altura de línea: 20px: combinado con la altura del elemento, cuando la altura es fija, establece la altura de la línea y controla el número de líneas mostradas
altura: 40px: establece la altura del elemento actual
::after {}: establece el estilo de puntos suspensivos

El código se ve así:

<body>
    <div class='demo'>这是一段很长的文本</div>
</body>


<style>
    .demo {
    
    
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
    
    
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

Utilice pseudoelementos para posicionar absolutamente el final de la línea y cubrir el texto, y luego utilice overflow: oculto para ocultar el exceso de texto.

Esta implementación tiene las siguientes ventajas :

Buena compatibilidad y buen soporte para los principales navegadores convencionales.
Truncamiento responsivo, ajuste según diferentes anchos

Cuando existe texto general en inglés, puede configurar el salto de palabra: romper todo para permitir que una palabra se divida cuando se rompe una nueva línea.

La implementación CSS pura del truncamiento basado en el número de líneas
también es muy simple: el código CSS central es el siguiente:

-webkit-line-clamp: 2: se utiliza para limitar el número de líneas de texto que se muestran en un elemento de bloque. Para lograr este efecto, debe combinarse con otras propiedades de WebKit)
display: -webkit-box: se usa en combinación con 1 para mostrar el objeto como un modelo de caja flexible
-webkit-box-orient: vertical: se usa en combinación con 1 para establecer o recuperar la disposición de los elementos secundarios del objeto flex box
overflow: oculto: el texto desborda el ancho limitado y el contenido queda oculto.
desbordamiento de texto: puntos suspensivos: en el caso de texto de varias líneas, use los puntos suspensivos "..." para ocultar el texto que excede el rango.

<p>
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >


<style>
    p {
    
    
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

Lo anterior utiliza la extensión de atributo CSS de webkit , por lo que el rango de navegador compatible es el navegador principal de webkit en el lado de la PC. Dado que la mayoría de los terminales móviles usan webkit, este formulario se usa comúnmente en terminales móviles.

Cabe señalar que si el texto es un párrafo largo en inglés o números, debe agregar el atributo word-wrap: break-word

También puedes usarJS para cooperar con CSSEl código de implementación es el siguiente:

La estructura CSS es la siguiente:

p {
    
    
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after{
    
    
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

La estructura JS es la siguiente:

$(function(){
    
    
 //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('p').each(function(i, obj){
    
    
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
    
    
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
    
    
            $(this).removeClass("p-after");
        }
    });
})

3. El estilo omitido que implementa el desbordamiento de texto de una o varias líneas tiene las siguientes ventajas y desventajas:

ventaja:

Simple y fácil de usar : es relativamente sencillo de implementar y solo requiere una pequeña cantidad de propiedades CSS para lograr el efecto.
Mejore la experiencia del usuario : muestre más contenido de texto en un espacio limitado, reduzca el desplazamiento de la página y la ocupación del espacio vertical y mejore la experiencia de lectura del usuario.
Aumente la belleza de la página : omita y muestre texto excesivamente largo para evitar que el contenido del texto exceda el límite del contenedor, haciendo que la página se vea más ordenada y hermosa.

defecto:

Solo es compatible con algunos navegadores : el estilo omitido de desbordamiento de texto de varias líneas actualmente solo es compatible con los navegadores WebKit. Otros navegadores necesitan usar otras tecnologías, como JavaScript, para implementarlo.
No se puede mostrar el contenido completo : debido a que el texto omitido está oculto, los usuarios no pueden ver directamente el contenido del texto completo y es posible que necesiten mostrar el contenido completo a través de otros métodos o interacciones.
No apto para determinados escenarios : el estilo de puntos suspensivos del desbordamiento de texto de una o varias líneas es adecuado para títulos cortos, resúmenes, etc., pero puede no ser adecuado para situaciones en las que es necesario mostrar contenido completo y detallado, como artículos largos. o editores de texto enriquecido.

En resumen, el estilo omitido para el desbordamiento de texto de una o varias líneas tiene ciertas ventajas para mejorar la experiencia del usuario y la estética de la página, pero también tiene limitaciones como la compatibilidad del navegador y la visualización de contenido incompleto. Al elegir usarlo, debe sopesarlo según las necesidades y escenarios de uso específicos.

4. El estilo de omisión para el desbordamiento de texto de una o varias líneas es principalmente adecuado para los siguientes escenarios:

Título : cuando el texto del título es demasiado largo, el uso del estilo de omisión puede hacer que el título se muestre más conciso sin afectar la capacidad del usuario para ver el título completo a través de otros métodos.
Resumen : el texto del resumen suele ser más corto, pero cuando parte del contenido del resumen es demasiado largo, el uso de un estilo elíptico puede hacer que la página sea más hermosa.
Diseño de tarjeta: en un diseño de tarjeta, cada tarjeta generalmente solo puede contener contenido de texto limitado, por lo que el uso de estilos omitidos puede ahorrar espacio y mejorar el efecto del diseño.
Listas de comentarios, mensajes , etc.: el texto generado por el usuario, como comentarios y mensajes, puede ser demasiado largo. El uso de un estilo omitido puede evitar que la página sea demasiado larga y permitir a los usuarios expandir el comentario completo haciendo clic u otros métodos interactivos.

Cabe señalar que el estilo de puntos suspensivos para el desbordamiento de texto de una o varias líneas no se aplica a todos los escenarios. Este estilo no se recomienda para situaciones en las que es necesario mostrar contenido completo y detallado, como artículos extensos, editores de texto enriquecido, etc. Además, durante el uso real se deben considerar factores como el diseño de página específico y los requisitos de diseño.