CSS percebe que a exibição de texto muito longo é omitida

1. Exibição omitida de linha única

Em CSS, você pode usar a propriedade text-overflow e a propriedade white-space para realizar a exibição omitida de texto muito longo. Veja como fazer:

1. Defina o estouro como oculto para ocultar o texto além dos limites do contêiner.

2. Defina o espaço em branco como nowrap para forçar o texto a aparecer na mesma linha.

3. Defina text-overflow como reticências para exibir elipses.

código mostra como abaixo:

.ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

Este código é usado quando a largura do contêiner é limitada, o texto além da largura do contêiner será oculto e uma reticência será exibida.

2. Exibição omitida de várias linhas

Se você precisar exibir várias linhas, poderá definir o estouro como oculto, o espaço em branco como normal e usar o atributo altura máxima para limitar a altura do contêiner.

código mostra como abaixo:

.ellipsis-multi-line {
   overflow: hidden;
   white-space: normal;
   text-overflow: ellipsis;
   max-height: 60px; /* 设置最大高度 */
}

Neste código, quando a altura do conteúdo do texto ultrapassar 60px, o excesso será ocultado e uma reticência será exibida.