Si el texto es demasiado largo, se mostrarán los puntos suspensivos y el mouse saltará para mostrar todo el contenido (sin usar la versión del componente de la interfaz de usuario)

Escenario comercial: en el proceso de desarrollo de la página real, muchas veces el texto es demasiado largo y desea mostrar los puntos suspensivos, y el mouse está sobre para mostrar todo el contenido. La mayoría de las veces, elegirá usar componentes de interfaz de usuario tooltipopoptip

Pero, de hecho, hay muchas ocasiones en que los requisitos para los estilos no son altos . En este momento, puede elegir un método que ahorre tiempo y trabajo. El método es el siguiente:

El efecto final es el siguiente:

Método 1. Usa css

1. Agregue los siguientes estilos para lograr el efecto de mostrar puntos suspensivos cuando es demasiado largo

desbordamiento: oculto; espacios en blanco: nowrap; desbordamiento de texto: puntos suspensivos;

2. Agregue un título a la etiqueta correspondiente, el código es el siguiente y se puede realizar el efecto descrito en el escenario comercial

 <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="value">{
    
    {
    
    value}}</div>

Método 2, usar filtro

1. Escriba una función de filtro para el proyecto vue y personalice la longitud máxima de visualización predeterminada

// 1、书写过滤函数
filter: {
    
    
  ellipsis (value) {
    
    
        if （value.length > 10）{
    
    
        	return value.slice(0,10) + '...'
        }
        return value;
    }
}

2. La función de filtro se usa en combinación con el título

<div :title="value">{
    
    {
    
     value | ellipsis }}</div>

fin ~