Чтобы добавить элементы per-message внутри элемента div, вы можете использовать JavaScript для создания и добавления новых элементов в DOM:
```javascript
// Создание нового элемента per-message
var newMessage = document.createElement('div');
newMessage.className = 'per-message';
newMessage.textContent = 'Новое сообщение';
// Добавление нового элемента внутрь div
var divElement = document.getElementById('myDiv');
divElement.appendChild(newMessage);
```
Чтобы удалить элементы per-string, вы можете использовать метод removeChild():
```javascript
// Удаление элемента per-string
var stringElement = document.getElementById('myString');
divElement.removeChild(stringElement);
```
Однако, если вы хотите реализовать вёрстку для отображения длинных сообщений в стиле редактора vim на странице с ограниченным количеством строк, учитывая отсутствие явных границ переноса строк и переменную высоту экрана, это может быть сложной задачей без использования overflow:hidden.
Одним возможным решением является использование CSS свойства `text-overflow: ellipsis` для обрезания длинных текстовых сообщений, а затем добавление кнопки для раскрытия полного содержимого сообщения. Кнопка может быть реализована с помощью JavaScript, чтобы отображать полный текст при клике:
```html
<style>
.message {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<div id="myDiv">
<div class="message">
Очень длинное сообщение, которое будет обрезано и показано с помощью многоточия.
<button class="show-more">Показать полностью</button>
</div>
</div>
<script>
var showMoreButtons = document.querySelectorAll('.show-more');
showMoreButtons.forEach(function(button) {
button.addEventListener('click', function() {
var message = this.parentNode;
message.style.whiteSpace = 'normal';
message.style.overflow = 'visible';
message.querySelector('.show-more').style.display = 'none';
});
});
</script>
```
Этот пример демонстрирует создание сообщения, которое обрезается при превышении доступной высоты с помощью многоточия. При клике на кнопку "Показать полностью" сообщение будет раскрываться и отображать полный текст.
Таким образом, определенная высота сообщения сохраняется до момента, когда пользователь решит раскрыть его полностью.