text-align right in small width div

Question

I'm trying to align text to the right in a small area. It becomes left align when the container is small. Is there anyway to force it right align?

div 
{ float: right;
width: 100px;
height: 50px;
text-align: right;
border: thin solid black;
}

https://jsfiddle.net/a362zr54/

For future uses to know, please accept an answer, if any, that best solve your question. — Ason, Mar 31 '16 at 16:08

score 5 · Answer 1 · answered Mar 29 '16 at 17:29

5

If you add direction: rtl; it will do that

div { 
  float: right;
  width: 100px;
  height: 50px;
  text-align: right;
  border: thin solid black;
  direction: rtl;
}

<div>
1testtesttesttesttesttesttesttesttest2
</div>

answered Mar 29 '16 at 17:29

Ason

79,264
11
79
127

score 2 · Answer 2 · answered Mar 29 '16 at 17:38

You can try direction: rtl;, but this might mess up your text.

If your content has a fixed size like in your example. You can also use position:absolute;right:0; like this:

.container { float: right;
width: 100px;
height: 50px;
border: thin solid black;
position:relative;
}
.content {
  text-align: right;
  position:absolute;
  right:0;

}

<div class="container"><div class="content">
testtesttesttesttesttesttesttesttest
</div>
</div>

score 1 · Answer 3 · answered Mar 29 '16 at 17:31

1

Simply add direction: rtl; to the container.

Demo https://jsfiddle.net/a362zr54/1/

answered Mar 29 '16 at 17:31

Arbel

28,418
2
23
29

text-align right in small width div

3 Answers3