if text start with "/", a css withe ellipsis, nowrap ltr left on overflow show a / as last char !
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: piradix, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0
Steps to reproduce:
Try this css/html code
<style>
.name {
max-width: 4em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
text-align: left;
}
</style>
<div class="name">/bonjour/la/france/du/monde</div>
Actual results:
I get "...monde/"
There are no "/" after "monde" of the source string in the code.
The "/" of "...monde/" correspond of the first "/" on the string "/bonjour/la/france/du/monde"
Expected results:
The good show must be "....monde"
the "/" don't be showing
If you replace the first "/" by a "+" you see "....monde+"
I suppose that is a bug width non letter char and "white-space: nowrap" on ltr ?
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•3 years ago
|
||
Despite the description saying "ltr", the actual CSS in the example has direction: rtl. That's what puts the slash at the right-hand end.
Try simply viewing
data:text/html,<div style="direction:rtl">/bonjour/la/france/du/monde</div>
The rendered result will be
bonjour/la/france/du/monde/
because the bidi algorithm resolves the leading "/" as RTL and places it to the right of the rest of the text (which all resolves as LTR).
So this is behaving as expected. Note that Chrome also shows the same result.
Description
•