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:
2
Answers
EDIT: The proper way of aligning the last line of the paragraph is with a use of the
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:
Actually the direction means something different….
You should use text-align: right; to have what you want…