Right align text in HTML input field

Question

I have an HTML tag with a short maxlength but a long value attribute. I'd like the displayed text to show the end (right side) of the text, rather than the start (left side).

<input maxlength=10 value="A really really really long entry goes in here"/>

currently shows:

"A really r"

instead I'd like it to show:

"es in here"

Cheers,

Ian

score 18 · Accepted Answer · answered Feb 11 '11 at 20:15

18

Do you want the visible area to start from the right? you can use css and the following rule input {direction:rtl;}

rtl means from right to left

example: http://jsbin.com/ilejo4

PS: the value of maxlength in your html must be wrapped with quotes, also you have to set the type of the input

answered Feb 11 '11 at 20:15

Sotiris

38,986
11
53
85

1

Strangely, if the value starts with a slash `/` (like a filename) - that slash is pushed to the "end" which is now the right side of the string. Use this with care. – mr rogers Aug 18 '14 at 18:42
-1 "rtl" does not keep the order when there is punctuation and numbers! Be careful. See https://stackoverflow.com/q/53947553/22470 – powtac Jun 24 '19 at 10:13

score 0 · Answer 2 · answered Jun 24 '19 at 10:33

0

Add style="text-align:right" to the input tag.

answered Jun 24 '19 at 10:33

powtac

40,542
28
115
170

Can you explain that further? Shouldn't the time for inline-style be over since years? – Nico Haase Jun 24 '19 at 10:50

score 0 · Answer 3 · answered Mar 29 '21 at 02:29

If you only want to display information, what you can do is place a span inside a div, in the div write overflow:hidden, display flex, justify-content: flex-end;

.contenedor{
  width: 100px;
  background-color: black;
  color: white;
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
  overflow:hidden;
  padding: 5px;
}

<div class="contenedor"><span>12345555555566final</span></div>

Right align text in HTML input field

3 Answers3

Linked