Hope everything is going well.
I encountered a challenging issue that I need help with (please run the snippet using firefox on Windows or Linux) :
<html>
<head>
<style>
.content {
background-color: red;
width: 200px;
display: flex;
flex-direction: row;
}
.content .text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content .text:first-letter {
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="content">
<div class="text">code mapping</div>
<div>(i)</div>
</div>
<div class="content">
<div class="text">code postal</div>
<div>(i)</div>
</div>
<div class="content">
<div class="text">zipe codigo</div>
<div>(i)</div>
</div>
<div class="content">
<div class="text">some div</div>
<div>(i)</div>
</div>
<div class="content">
<div class="text">foo bar zoo</div>
<div>(i)</div>
</div>
<div class="content">
<div class="text">The expected behavior for the ellipsis</div>
<div>(i)</div>
</div>
</body>
</html>The problem arises when I apply capitalization to the first letter, causing unexpected text-overflow behavior.
Here is a screenshot of the displayed result (as it may vary depending on browser settings) : https://i.sstatic.net/OzsY3.png
Interestingly, the behavior differs based on the specific string content.
If you can help me by :
- Explaining why the behavior changes based on the text input (for example, only "code postal" displays ellipses in my case)
- Suggesting how to prevent ellipses when the parent element's width is not reached?
Wishing you a great day!
Edit 1:
I found that replacing capitalize with uppercase resolves the issue. However, this workaround does not fully address the original question and creates unexpected spacing between elements.