Как я могу вызвать переполнение текста слева от моего ввода текста?

Question

У меня есть поле ввода (переменной ширины) с текстом, который длиннее, чем он может отображать. По умолчанию отображается самая левая часть строки (т.е. первая часть строки) и скрывается избыток (самая правая часть, т.е. конец строки).

<input type="text" value="abcdefghijklmnopqrstuvwxyz" style="width: 25%; font-size: 25px; margin: 50px;">

При щелчке по полю ввода можно перемещать окно и просматривать любую часть окна. строка. Когда курсор находится в конце строки, отображается только конечный раздел - первая часть строки обрезается и скрывается:

Я хочу, чтобы поле ввода всегда выглядело так, предпочитая обрезать начало строки, а не конец (просто потому, что для этого указанного c ввода конец строки полезнее видеть, чем начало).

Использование text-align: right, к сожалению, не достигает этого - оно приводит к выравниванию текста по правому краю только тогда, когда может поместиться полный текст:

Я бы предпочел не использовать JS для обрезки длины строки, так как это лишит пользователя возможности ее редактировать.

---

Для ясности, я хотел бы, чтобы это происходило постоянно, а не только когда оно фокусируется с помощью . Используйте JavaScript, чтобы поместить курсор в конец текста в элементе ввода текста

Answer 1

<input type="text" value="abcdefghijklmnopqrstuvwxyz" style="width: 25%; font-size: 25px; margin: 50px;" dir="rtl" onfocus="this.dir='auto';this.scrollLeft = this.scrollWidth;" onfocusout="this.scrollLeft = this.scrollWidth;">

Answer 2

Для достижения того, что вы ищете, используйте редактируемый контент div . С ним вы можете использовать justify-content с flexbox.

div[type=text] {
  /* Scroll to the end */
  justify-content: flex-end;
  display: inline-flex;
  
  /* Basic display formatting */
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}

<div type="text" contenteditable="true">abcdefghijklmnopqrstuvwxyz</div>

Если вам не нравится выравнивание по правому краю, мы можем удалить flexbox и использовать javascript для выравнивания элементов:

[...document.querySelectorAll('div[type=text]')].forEach(el => {
  el.scrollLeft = el.scrollWidth;
})

div[type=text] {
  /* Basic display formatting */
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}

<div type="text" contenteditable="true">abcdefghijklmnopqrstuvwxyz</div>

Answer 3

Благодаря "Прокрутка" справа от длинного ввода текста

С scrollWidth:

<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">
<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">
<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">

$('input').each(function(){ $(this).scrollLeft($(this)[0].scrollWidth) })

Как сказал Тим, атрибут dir не очень хорошее решение с символами '<' '>' '/' '\'

Answer 4

Здесь решение, Вы должны добавить имя класса для применения css.

<input type="text" class="myclass" value="abcdefghijklmnopqrstuvwxyz" style="width: 
25%; font-size: 25px; margin: 50px;">

CSS

.myclass{
direction: rtl;
text-align: left;

}