Как реализовать dropdown под разное количество текста?

Question

[Алекс]

Делаю блок который может сворачиваться тем самым пряча часть контента, но проблема возникает в том что невозможно угадать высоту контента в свернутом виде на разных разрешениях часть строки может выглядывать, потому что разный размер шрифта и разное количество текста, где то 1 параграф большой, а где то 2 маленьких. Вариант разделить на 2 блока тот что всегда виден и второй что скрыт/развернут не подходит. Что можно придумать в этом случае?

<div class="dropdown" aria-expanded="false" data-height="высота в свернутом виде">
  <div class="dropdown__content">
      <!-- какой то текстовый контент -->
  </div>
  <button class="dropdown__button">Развернуть/Свернуть</button>
</div>

document.addEventListener('click', e => {
	if( !e.target.closest('.dropdown__button') ) return;
  
	const dropdown = e.target.closest('.dropdown');
	const dropdownContent = dropdown.querySelector('.dropdown__content');
	const dropdownButton = e.target.closest('.dropdown__button');
	const opened = (dropdown.getAttribute('aria-expanded') === 'true');

	if(opened) {
		dropdown.setAttribute('aria-expanded', false);
 		dropdownContent.style.maxHeight = dropdown.dataset.height + 'px';
	} else {
  		dropdown.setAttribute('aria-expanded', true);
  		dropdownContent.style.maxHeight = calcHeightContent(dropdownContent) + 'px';  
	}
})

function calcHeightContent(element) {
	const containerClone = element.cloneNode(true);
	let naturalHeight = 0;
	containerClone.style.position = 'absolute';
	containerClone.style.visibility = 'hidden';
	containerClone.style.opacity = 0;
	containerClone.style.maxHeight = '100%';
	containerClone.style.zIndex = -1;
	element.parentNode.append(containerClone);
	naturalHeight = containerClone.clientHeight;
	containerClone.remove();

	return naturalHeight;
}

Comments

[Andrew]

Вариант разделить на 2 блока тот что всегда виден и второй что скрыт/развернут не подходит.

Делал бы так. Только не ручками делил на 2 блока, а скриптом, по кол-ву символов.
И стили писать в js, когда вы и так используете css - чето фе.

[Алекс]

Andrew, вариант не плох, спасибо, только вот где то самое нужное количество по которому ограничение ставить, все буквы же разные по ширине, да еще есть параграфы, если по параграфам делить, то тоже может оказаться параграф на 100500 строк

[Andrew]

Алекс, так а вам какой критерий нужен?
Вы зрительно хотите делить?
Думал вам достаточно какое-то кол-во символов.

[Алекс]

Andrew, да, верно. Дизайнер рисует, все складно красиво, клиент хочет одно поле для ввода, а как объединить две хотелки, тут я повис. Видимо складно красиво не получается) буду значит или градиент накидывать или то что вы предложили

[Andrew]

Алекс, сделать max-heigth: Xpx; overflow: hidden;
при клике дописывать overflow: auto; max-height: auto;

Answer 1

[profesor08]

При раскрытии смотри высоту блока scrollHeight, анимируй раскрытие. Потом устанавливай высоту auto. При закрытии, устанавливай высоту в значение scrollHeight и анимируй уменьшение.

Comments

[Алекс]

Спасибо за совет с scrollHeight, минус одна бесполезная функция). Но вопрос немного видимо не поняли, у меня именно в свернутом виде торчит часть строки, тоесть на одной ширине экрана норм, на другой так как количество строк изменилось может как влезать так и нет (допустим мой пример если открыть на jsfiddle на ширине менее 500px торчит часть строки, да можно подобрать для "мобилки", но что если строка будет другая?) можно ли как то это отследить/подгадать?

[profesor08]

Алекс, оберни часть строки, которую хочешь показывать, в блок, и играйся с ним. При изменении размера окна, проверять его высоту и устанавливать такую высоту своему контейнеру.

Еще можешь задать max-height: 50px и height: auto, так блок не будет превышать определенный размер, но будет уменьшаться, если содержимое позволит. А перед манипуляциями с анимацией, удалять это свойство, по окончанию добавлять.

[Алекс]

profesor08, так вот тут и собака и зарыта, как мне определить высоту видимой части если она плавает в зависимости от текста, взять один и тот де экран и два разных блока с текстом, где-то 2 коротких параграфа, а где-то 1 длинный (между параграфами высота меньше одной строки). Я так полагаю тут только градиентом подзалить нижнюю часть блока. Потому что обпределить позицию условно 5 строки в тексте не представляется возможным.

[profesor08]

Алекс, line-height

[Алекс]

profesor08, мне кажется я вам не могу объяснить( я имею ввиду на одном разрешении у нас может поместиться и 2 строки + оступ между параграфами + строка, а если параграф большой то может поместиться 4 строки и пятая торчать (все дело в отступе который меньше высоты строки)

[profesor08]

Алекс, подгоняй под высоту первого параграфа и все, какие там отступы не имеет значения, их не будет видно