Hey there, I'm currently working on styling something that shows both the user's username and the title of an item on the same line, similar to how it's done on GitHub:
username / title
I want to make sure that if the combined width of the username and title is less than the container width, it displays the full text of both. However, if they exceed the maximum width of the container and start to overflow, I'd like them to be restricted to a 50-50 or maybe 40-60 ratio with ellipsis, like this:
long_usern... / long_ti...
After playing around with max-width, min-width, and percentages, here's where I've ended up:
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title{
min-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You can see the implementation in action here.
However, sometimes when the title is too long, it tends to obscure the username, reducing it to just a few dots. I'm not quite sure why it behaves this way and how priority is given to each element when deciding how much width it takes up.
I would like the username to take up at least 30-40% of the total width, regardless of the length of the text in each element. It's okay if the solution imposes a hard limit on the username to prevent it from exceeding 40% width, especially in cases where the username is long and the title is short.
I've tried using min-width for the username class, but it creates unnecessary blank space before the slash when the username is short:
i / loveyou
Additionally, using a max-width of 50-50 doesn't achieve the desired effect when the username is short and the title is long:
i / hateyousomu... |
| <-- maximum available width for container
username / long_title_na...|
|
i / hateyousomuch555 | <-- ideal solution
In conclusion, the perfect solution should maintain a 40-60 ratio of max-width when the combined widths of both elements surpass the available width of the container. Furthermore, it should display the complete width of text in both elements otherwise.
Edit: A big thank you to @robbieAreBest for providing an insightful answer. One issue I encountered was that adding width: fit-content to the .username class didn't yield any results. I discovered that the percentage width the username occupies within the container directly correlates with its length. The balanced 50/50 ratio only holds true when the username length matches or exceeds that of the title.
For more information, check out this example. If anyone has insights into why this behavior occurs or suggestions for improvement, I'd greatly appreciate your input!
Edit 2 + current solution I'm content with: I've found a solution, but as always, there's room for enhancement. The current approach covers basic scenarios and caps the username at about 40% of the total width, even with a short title. If there are any overlooked combinations where my code fails, or if someone devises a better solution for handling cases with long usernames and short titles, please share your findings. The ultimate goal is to handle long username and title combinations elegantly while maximizing the displayed information—for instance, limiting the username to 60% width in instances of lengthy usernames paired with shorter titles. Feel free to offer suggestions on displaying the full username in situations where it significantly outstrips the title length. Thanks to everyone who has contributed thus far—I truly value your assistance.