0

I try to use text-align: justify and direction: rtl in order to make the last line of a text float to the right. The problem is that if my text starts and ends with ellipses, these are not placed correctly.

p { text-align: justify; direction: rtl;}
.tip { text-align: left; direction: ltr; color: red;}
<p>...Lorem ipsum dolor sit amet, consul vivendo scripserit qui ut, an vidit signiferumque nec, iisque adipisci ius eu. Recteque definitiones vix an, id malis deterruisset vix, sea expetendis ullamcorper at. Mei eu ubique repudiare argumentum. Est no nostro ceteros detracto, pertinax oportere philosophia cu qui. Vix ponderum urbanitas repudiandae ex, assentior efficiantur et pro. An modo pertinacia omittantur mei...</p>

<p class="tip">The problem: The text doesn't start with ...Lorem and doesn't end with mei...</p>

EDIT:

direction: rtl is a completely wrong approach and causes problems with punctuation. I was misled by the accepted answer here: Text-align justify but to the right?

What I needed was text-align-last:

 text-align-last: right;
-moz-text-align-last: right;

Also check:

tgogos
  • 23,218
  • 20
  • 96
  • 128

2 Answers2

2

EDIT: The proper way of aligning the last line of the paragraph is with a use of the

text-align-last

CSS property. With a value set to right in this case. The property has no effect in the Safari browsers, so be aware of that.

below is the original answer which addresses the problem from the question

There is a similar situation described in this question:

Browsers render final comma on the begenning

Based on that, a possible workaround to your problem would be wrapping each ellipsis in a container with modified encoding, like this:

<span style="unicode-bidi: bidi-override;">...</span>
Community
  • 1
  • 1
wiktus239
  • 1,404
  • 2
  • 13
  • 29
0

Actually the direction means something different.... You should use text-align: right; to have what you want...

Guilherme Silva
  • 140
  • 9