direction: rtl, text-overflow: ellipsis

Question

)Hi, guys

I just was mading Phone dial page

I saw very weird thing in safari. Chrome or other browser works wellll...

just run this code with each browsers ( https://codepen.io/Jinxooh/pen/bodRdB )

code

// css

.l {

text-align: left;

direction: rtl;

}

.r {

text-align: right;

}

p {

width: 150px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

border: solid 1px green;

}

// html

Do you guys have a solution?

it works but hide 2 more numbers

ex >

above link result : 1234567 -> 12345678 overflow result ...345678

happy result I want: 1234567 -> 12345678 overflow result ...2345678

2.7k

Posted by

Jeckson

Reply

Answer 1

Hi Jeckson,

I guess that's a Safari (or Webkit ?) BUG !

I am using a simple trick to mask email addresses from spam bots by using direction: rtl and unicode-bidi: bidi-override

The problem is when I combine this with a text truncate using white-space: nowrap and text-overflow: ellipsis

It is placing the three dots at the end of text, but it actually truncates from the begining 😟

Posted by

razvanioan

Replies