ユーザープロフィールで「...」の代わりに「およびXY他のグループ」を表示

UX
,
4

How about this?

  • First we add a comma after the last named link
  • Then we hide the ...
  • Then we insert the and more text – and back it up a little because the space for the ... is technically still there
  • (Also added more specific selectors to avoid potential conflicts elsewhere)
.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

There’s probably a fancier way to remove the ... from the flow completely, but the negative margin seems to work ok.