Как определить выходит ли текст за пределы блока?

Question

[Алексей]

Всем привет! В блоке с overflow:hidden есть некий текст (длина не известна) максимальная высота в CSS задана 100px.
Нужно показать кнопку ("раскрыть полностью") только в том случае если текст не влазит в блок.
Как такое провернуть?

Answer 1

[Stalker_RED]

function isOverflowed(el) {
  return el.scrollWidth > el.offsetWidth || el.scrollHeight > el.offsetHeight;
}

https://jsfiddle.net/y6w7vg0w/

Comments

[Алексей]

Красота! Спасибо ;)

[Иван]

Хм, а я всегда примерно предусматривал размер заранее и резал на бекэнде... Но Вообще прикольный лайвхак, правда не отвечает на вопрос сколько резать от текста... Наверное придётся циклом пинать...

[Stalker_RED]

Иван: В ряде случаев можно резать вообще средствами css.
Гуглить "css ellipsis"

Answer 2

[Костя]

Узнать сколько символов вмещяется в блок и записать как максимальное значение. Дальше просто посчитать количество символов в тексте и сравнивать с максимальным. Если символов больше, то обрезаем текст и добавляем кнопку.

Comments

[Stalker_RED]

Вот вам две строчки по десять букв. Что там с чем вы хотели сравнивать?
жжжжжжжжжж
iiiiiiiii

[Иван]

Я кстати тоже сначала так подумал, но даже если все просчитать, то у клиента может быть и свой шрифт.