Как узнать сколько строк будет занимать текс в блоке?

Question

Как проверить как-то сколько строк будет занимать текст в блоке?

Мне нужно написать условие что если название занимает одну строку то описание занимает две, а если название занимает две строки то описание должно занимать одну. Думал сделать так, посчитать сколько букв влазит в строку и проверять, что если строка имеет больше чем такое количество то такой стиль иначе другой. Можно ли сделать по другому?

Answer 1

Тут псевдокод который может помочь решить задачу. Идея в том, что мы знаем какую высоту занимает блок когда там 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>

БЛОГ НА HUSL

Как узнать сколько строк будет занимать текс в блоке?

Ответы (1 шт):