Overflow-x position on right

user_14119306 0
Viewed 79

I have one paragraph p where I need to display some data.

I set white-space:nowrap and text-align:right. When someone types some content in one text field, this content shows in the paragraph from right to left.

But when data comes to left scroll-x was set to left, and to see new typed content you need to scroll to right.

I need the reverse, showing new content and scroll if you want to see the old one.

If i use direction: rtl, it works fine, but only for word, not with number, so i need another solution. Ofc i have an idea to do this with javascript, but i want solution without it.

document.querySelector('#inpt').addEventListener('keydown', function(e) {
  document.querySelector('#display').innerHTML = e.target.value
})
p {
  width: 100%;
  white-space: nowrap;
  text-align: right;
  overflow-x: scroll;
}
<input id="inpt" type="text">
<p id='display'>
</p>

css html javascript
1 Answers

Setting display: flex with a flex-direction of row-reverse on your p tag seems to do the trick:

document.querySelector('#inpt').addEventListener('keydown', function(e) {
  document.querySelector('#display').innerHTML = e.target.value
})
p {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  white-space: nowrap;
  text-align: right;
  overflow-x: scroll;
}
<input id="inpt" type="text">
<p id='display'>
</p>

user_787380
Related