How to indent text from the right side? [duplicate] - html

Question

This question already has answers here:
css text-indent equivalent on the right side
(6 answers)
Closed 4 years ago.
Consider this example:
How to indent text from the right side ? As seen from the example, this is indented from the left side, but how to make it opposite without affecting any other elements ?
I tried to play with text-indent, but could not figure it out.
I also refered here, but also could not get it working.
I managed to do it with float: right and padding, but they become block elements in that case, which should not happen.
text-align does this, but it moves all of it to the right side. I want to keep it on the left, but with reverse alingment. It also should not affect anything on the right or left side of it.

Answer 1

It seems as though you want the text to be right-aligned with some padding so it's not right up against the side of the box.
p {
text-align:right;
padding-right: 5em;
}
<p>test</p>
<p>test test</p>
<p>somethin grandom</p>
<p>test again</p>
<p>this is the last test</p>
An alternative is to use direction:
p {
direction:rtl;
text-indent: 5em
}
<p>test</p>
<p>test test</p>
<p>somethin grandom</p>
<p>test again</p>
<p>this is the last test</p>

Answer 2

Use display: inline-block with text-align. It will expand the container just enough and will not change the display to block:
.foo {
display: inline-block;
text-align: right;
background: papayawhip;
}
<div class="foo">
test<br>
test test test<br>
test test
</div>

Answer 3

Make the element inline-block and then use text-align:
.text {
display: inline-block;
text-align: right;
}
p {
margin: 0;
}
<div class="text">
<p>some text</p>
<p>text</p>
<p>some text text and more</p>
<p>some text</p>
</div>
Or use float:left and clear float after if you want to have a line break after:
.text {
float: left;
text-align: right;
}
p {
margin: 0;
}
<div class="text">
<p>some text</p>
<p>text</p>
<p>some text text and more</p>
<p>some text</p>
</div>
<div style="clear:left;">
lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret lorem ipsume dolret
</div>

Answer 4

Consider using text direction direction:rtl;, and then applying the indentation. This way your text will appear to be indented from the right.

Answer 5

Add padding-right: 20px; to the stylesheet. Of course you can change the value.