16.02.2025

Truncamento de Texto com Reticências em Dropdowns CSS sem JavaScript

Resumo Rápido

Se você deseja que o texto que não couber em um dropdown seja truncado e substituído por reticências, use CSS. Aplique a propriedade text-overflow: ellipsis aos elementos select e option. Para evitar quebras de linha, defina white-space: nowrap e overflow: hidden. Como resultado, qualquer texto que ultrapasse o limite será substituído por reticências. Lembre-se de que os estilos de dropdown podem ser renderizados de maneira diferente em diferentes navegadores.

select, select option {
  width: 150px; /* Ajuste a largura conforme necessário para o seu projeto */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Caso a propriedade text-overflow: ellipsis não seja suportada pelo navegador, você pode usar padding para evitar sobreposição de texto. Isso não é ideal, mas serve como uma solução temporária.

O Que Fazer com Navegadores que Não Suportam Reticências?

Entre outros, o Chrome começou a suportar a propriedade text-overflow: ellipsis para elementos <select> apenas em julho de 2020. Ao trabalhar com versões mais antigas de navegadores ou outros navegadores, o uso de padding se torna uma alternativa confiável. Essa abordagem ajuda a organizar o texto de forma ordenada quando outros métodos não são adequados.

Nenhum JavaScript Necessário

Se o seu projeto não incluir bibliotecas JavaScript de terceiros, considere usar bibliotecas como Chosen para personalizar elementos <select> sem depender de frameworks JS pesados.

Removendo a Seta do Dropdown

Você pode remover a seta do dropdown—é como dar um bom corte no cabelo antes de um evento importante: a lista ganhará uma aparência elegante e estilosa.

Estilizando o Dropdown com CSS

Todo mundo já mudou seu estilo de roupa pelo menos uma vez na vida, certo? Use as propriedades border-style e background para dar um toque único à lista, semelhante a um filtro personalizável no Instagram.

Truncando Texto no Servidor

Às vezes, é ideal descarregar o truncamento de texto para o servidor, que pode determinar os limites para aquele texto e prepará-lo para exibição no lado do cliente.

Atualizando Dinamicamente o Dropdown Usando JavaScript

Com JavaScript, você pode criar uma interface mais dinâmica: atualizar o dropdown com base nas interações dos usuários em tempo real.

Usando Pseudo-elementos para Estilização Adicional

Com pseudo-elementos—uma verdadeira obra-prima em CSS—você pode modificar facilmente a aparência dos elementos, como adicionar reticências a <select>. O seletor pointer-events garante interação contínua do usuário com o dropdown.

Selecionando Comprimento de Texto com Base em Condições

Dados específicos armazenados no atributo dataset permitem ajustar o conteúdo do contêiner de acordo com a seleção do usuário, em conjunto com JavaScript.

Visualização

Para limitar o comprimento do texto no dropdown:

[Frase Curta, Frase Longa, Frase Que Precisa de Truncamento, Mais Uma Frase Muito Longa]

Buscamos o seguinte efeito usando reticências:

[Frase Curta, Frase L...onga, Mais Uma Fr...ase Longa]

Assim, podemos aprimorar a aparência do dropdown, mantendo a integridade estética independentemente dos comprimentos variados dos elementos contidos.

Aplicando Propriedades CSS

Queremos compartilhar alguns segredos sobre o uso de CSS.

Usando Padding para Esconder Texto

Se o texto se sobrepõe em navegadores que não suportam text-overflow: ellipsis, você pode usar padding. Aplique o seguinte código:

select {
  -webkit-padding-end: 25px; /* Embora seja peculiar, este código funciona corretamente no iOS */
  padding-right: 25px; /* Ajuste este parâmetro para uma aparência mais organizada */
}

Certifique-se de ajustar os parâmetros -webkit-padding-start e -webkit-padding-end para uma exibição adequada no iOS.

Decorando com Bordas e Fundos

Personalize os estilos de borda e fundo, para que sua lista fique única e vibrante:

select {
  border: 1px solid #000; /* Escolha uma cor que funcione para você */
  background-color: #fff; /* Esta é sua tela para criatividade! */
}

Lidando com Comprimento de Texto no Lado do Servidor

Devido à imprevisibilidade do comportamento do cliente, é essencial consultar o servidor. Ele pode ajudar a definir limites claros sobre o comprimento do texto para uma renderização consistente em diferentes navegadores.

truncate("Uma string muito longa que se parece com as Cataratas do Niágara", length: 25) /* O texto se torna gerenciável, como um suave riacho */

Atualizando Dinamicamente o Conteúdo com JavaScript

JavaScript não apenas lida com eventos, mas também pode dar vida ao seu estilo e funcionalidade:

document.querySelector('select').addEventListener('change', function() {
  this.setAttribute('data-content', this.options[this.selectedIndex].text);
  // Assim, o dropdown é instantaneamente transformado, atualizando seu conteúdo.
});

Recursos Úteis

1. Guia Completo do Elemento Table | CSS-Tricks
2. Usando Layouts Multicolunas - CSS: Folhas de Estilo em Cascata | MDN
3. Editor Tryit do W3Schools
4. Clampeamento de Linha (Truncando Texto para Múltiplas Linhas) | CSS-Tricks
5. "text-overflow" | Acompanhando o suporte... Tabelas de suporte para HTML5, CSS3 e mais.
6. Módulo CSS Overflow Level 3

Video

Navigation