Bug #9114
closed
group with long name messes up homepage layout
Added by Matt Gold about 6 years ago.
Updated about 6 years ago.
Description
Please see the attached screenshot. Is there any way to foreshorten the group name if the group name string is too long so that the layout is more even?
Files
To be clear, this is not really an issue with long group names per se, but group names that have very long words in them, so that the browser doesn't know when to break the line.
There are ways to force line breaks, but these changes tend to have adverse effects on the 99% of texts that would break on word endings under normal circumstances. See https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/. Ray, do you know of a way to make this work reliably using only CSS? We could fix with JS but that's pretty cumbersome.
I usually go with the ellipsis technique outlined in that CSS Tricks article.
It's a CSS-only approach that works well, but if we do this, we should use a title attribute so the full name of the group can be seen on mouseover. That's not really a mobile-friendly option though.
- Target version set to 1.12.8
The ellipsis technique as described affects items that would otherwise wrap normally. See attachment.
(Note that you can't test in Firefox, because it line breaks on the slash character.)
If we leave out the white-space: nowrap declaration, it seems to fall back properly. That's probably our best fix.
A title element is probably a good compromise. We could also consider removing the ellipsis declaration on mobile.
Ray, if this is easy for you to do, please go ahead, otherwise assign it to me or Dan and we'll do it for the next maintenance release.
- Status changed from Assigned to Resolved
- Related to Bug #9149: Doc listing layout issue added
Also available in: Atom
PDF
