CSS (direction : rtl, text-overflow: ellipsis) is working with wrong. compare with other browser!

.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;}

<pclass="l">111222333444555666777888999</p><pclass="r">111222333444555666777888999</p>

Hi everyone!

The result is different with other browser! just code run each browser ( safari and others ( Chrome.. etc...)

here is the link ( http://jsbin.com/gahezakayu/1/edit?html,output )

How can I get the result that same things from the others??? Is there any other property??

or.. just safari problem?