Mostrar "e outros XY grupos" em vez de "..." no perfil do usuário

Experiência do Usuário
,
4

Que tal isto?

  • Primeiro adicionamos uma vírgula após o último link nomeado
  • Depois escondemos o ...
  • Em seguida, inserimos o texto and more — e o afastamos um pouco porque o espaço para o ... ainda está tecnicamente lá
  • (Também adicionamos seletores mais específicos para evitar conflitos potenciais em outros lugares)
.user-main .about .secondary dd.groups span:last-of-type::after {
  content: ",";
}

.user-main .about .secondary dd.groups:last-child > a {
  visibility: hidden;
}


.user-main .about .secondary dd.groups:last-child > a::after {
  visibility: visible;
  margin-left: -.8rem;
  content: "and more";
}

image

Provavelmente existe uma maneira mais elegante de remover o ... completamente do fluxo, mas a margem negativa parece funcionar bem.

1 curtida