HTML текстовое поле с прокруткой, но предотвращение редактирования?

Question

У меня текст отформатирован с переносом строки. Текст больше, чем умещается по вертикали, поэтому он прокручивается. Хорошо.

const securityMessage = 'Here's my text.\r\nHere's another line and so on.';

Мне нужно отобразить текст в области прокрутки на странице, но у меня есть модальное окно с HTML textarea, где мои пользователи могут редактировать текст.

Сначала я попробовал использовать textarea, который отлично работает, но его можно редактировать. Но установка атрибута readonly элемента управления также запрещает прокрутку, поэтому пользователь не может просмотреть весь текст, не открывая модальный.

<textarea name="secMsg" formControlName="secMsg" cols="30" rows="15" class="form-control h-100" disabled>
</textarea>

Я также пробовал прокручиваемый DIV с Angular:

<div class="secMsg" [innerHTML]="securityMessage"></div>

За исключением того, что это не HTML и не распознает разрывы строк.

Итак, мне нужна простая строка с разрывами строк для моего редактора textarea пока отображается этот текст в области прокрутки нельзя редактировать.

Answer 1

Ваше решение div будет работать, ему просто нужно CSS для обработки разрывов строк.

Свойство css white-space - это то, что вы ищете, скорее всего, white-space: pre-line; но вы можете поиграть с другими вариантами, чтобы увидеть, что лучше всего подходит для вашего варианта использования.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space