Как проверить как-то сколько строк будет занимать текст в блоке?
Мне нужно написать условие что если название занимает одну строку то описание занимает две, а если название занимает две строки то описание должно занимать одну. Думал сделать так, посчитать сколько букв влазит в строку и проверять, что если строка имеет больше чем такое количество то такой стиль иначе другой. Можно ли сделать по другому?
Тут псевдокод который может помочь решить задачу. Идея в том, что мы знаем какую высоту занимает блок когда там 1 строка. Учитывая паддинг мы можем посчитать изменения когда текста становится больше. Паддинг учитывается только вертикальный.
const block = document.querySelector('.container')
const countRowsBlock = document.querySelector('#count-rows');
const textarea = document.querySelector('#textarea');
const heightOneRow = 18; // по умолчанию мы знаем сколько высота нашего блока с 1 строкой. Можно считать динамически у любого блока после загрузки страницы или ресайза
const padding = 20;
textarea.addEventListener('input', (e) => {
block.innerText = e.target.value;
countRowsBlock.innerText = ((block.clientHeight - padding) / heightOneRow);
}).container {
width: 300px;
background-color: red;
padding: 10px;
}<div class="container">
</div>
<div>
Кол-во строк: <span id="count-rows">0</span>
</div>
Поле ввода:
<textarea id="textarea"></textarea>