Чтобы создать элемент HTML с редактируемым содержимым и без символов новой строки, вы можете использовать следующие методы:

Элемент

1. . Вы можете использовать элемент

   с атрибутом contenteditable, установленным в значение «true». По умолчанию нажатие клавиши ввода в редактируемом содержимом элементе

   вставляет новую строку. Чтобы предотвратить перевод строки, вы можете обработать событие «keydown» и отменить поведение по умолчанию при нажатии клавиши ввода.

<div contenteditable="true" onkeydown="if (event.keyCode === 13) { event.preventDefault(); }"></div>

Элемент
2. : аналогично элементу
   , вы можете использовать элемент с . contenteditableи обработать событие «keydown», чтобы предотвратить перевод строки.

<span contenteditable="true" onkeydown="if (event.keyCode === 13) { event.preventDefault(); }"></span>

Элемент

3. . Элемент

   — это элемент уровня блока, который автоматически добавляет после себя новую строку. Чтобы предотвратить это, вы можете использовать CSS, чтобы стилизовать элемент

   так, чтобы он вел себя как встроенный элемент.

<style>
  p[contenteditable] {
    display: inline;
  }
</style>
<p contenteditable="true"></p>

Элемент

4. : элемент 
   сохраняет пробелы и разрывы строк. Установив для атрибута contenteditableзначение «true», вы можете сделать его доступным для редактирования без автоматической вставки новой строки.

<pre contenteditable="true"></pre>

, ,

,