24.11.2024

"CSS: Simplificando a Exibição de Elipses para Texto que Excede o Tamanho em Span"

Resposta Rápida

Para cortar o texto em um elemento <span> quando ele excede o limite, você precisa usar a propriedade text-overflow: ellipsis;. Essa propriedade oculta o conteúdo excessivo (overflow: hidden;) e, com white-space: nowrap;, evita que o texto quebre para uma nova linha.

Código CSS:

.span-ellipsis {
  display: inline-block; /* Declara o elemento como inline-block para definir a largura */
  width: 150px; /* Define a largura máxima */
  overflow: hidden; /* Oculta o conteúdo excessivo */
  white-space: nowrap; /* Impede a quebra de palavras */
  text-overflow: ellipsis; /* Insere elipses no final */
}

Código HTML:

<span class="span-ellipsis">Esse texto precisará ser cortado com elipses porque é longo demais e não cabe nos limites definidos...</span>

Saída: Esse texto...

Considerando Mudanças de Texto Dinâmicas

É bastante interessante, não é? Entretanto, tenha em mente que o parâmetro width na classe .span-ellipsis deve ser escolhido considerando o tamanho potencial do conteúdo ou a largura do elemento pai.

Quebrando a Maldição de Uma Linhas

O método descrito acima funciona apenas para texto em uma única linha. Para lidar com o overflow em várias linhas, as propriedades line-clamp são utilizadas. Mas é importante lembrar que elas podem não ser suportadas em versões mais antigas dos navegadores. Nesse caso, soluções alternativas precisarão ser exploradas.

Gerenciando Conteúdo com JavaScript

Quando o CSS não é suficiente, o JavaScript entra em cena. Com ele, você pode definir uma função add3Dots para gerenciar o conteúdo e adicionar uma elipse.

function add3Dots(string, limit) {
  let dots = "...";
  if (string.length > limit) {
    // Corta o texto e adiciona elipses
    return string.substr(0, limit - dots.length) + dots;
  }
  return string;
}

// Aplica a função ao texto dentro do elemento
document.querySelector('.span-ellipsis').textContent =
  add3Dots(document.querySelector('.span-ellipsis').textContent, 150);

Usar JavaScript amplia suas opções para gerenciar o overflow de conteúdo.

Visualização

Pense no overflow de texto em `<span>` como uma estante de livros transbordando:

Sem gerenciamento de overflow:
Estante: |Deveria haver uma descrição do livro aqui, mas não está...|

Com `text-overflow: ellipsis`:
Estante: |Deveria haver...|

Essas analogias ajudam a visualizar o funcionamento das propriedades CSS de forma mais clara.

jQuery para Melhor Controle sobre o Overflow de Texto

Se você está apenas começando sua jornada no controle de overflow de texto, recomendamos experimentar o plugin jQuery Ellipsis, que simplifica muito essa tarefa. Mas lembre-se, usar plugins requer uma abordagem responsável.

Exemplo:

// Ativando o plugin
$("#spot span").ellipsis({
  responsive: true // Habilita o modo responsivo ao redimensionar a janela
});

Dicas de um Desenvolvedor Experiente

1. Design Responsivo: Ao definir a largura, use unidades vw para tornar o elemento mais adaptável.
2. Acessibilidade: Para pessoas com deficiência visual, é importante usar aria-label para transmitir o texto completo.
3. Efeitos de Hover: Considere usar o atributo title ou tooltips para exibir o texto completo ao passar o cursor.

Recursos Úteis

1. text-overflow | CSS-Tricks: Detalhes sobre a propriedade text-overflow.
2. text-overflow - CSS: Folhas de Estilo em Cascata | MDN: Documentação oficial sobre text-overflow.
3. Propriedade CSS text-overflow - W3Schools: Explicações claras e exemplos de uso de text-overflow.
4. Propriedade CSS text-overflow - CSS Portal: Um recurso para explorar técnicas avançadas e testar a compatibilidade com vários navegadores.

Video

Navigation