Увеличить высоту дива по его содержимому с переносами текста и заданным max-height
<div id="mta"> имеет наименьшую высоту (под одну строку).
<div id="mta"> - 'открыт'.
Как сделать, чтобы при 'открытом' <div id="mta">, - его содержимое выводилось полностью.
Сейчас длинные слова, например, X01234567890_01234567890_01234567890 обрезаны.
В идеале, сделать, чтобы и заполнение было плотнее, т.е. использовать свободное место такое как после abc def, а длинным словам делать разрыв (перенос), и совместимость в браузерах.
Можно для него убрать display: table; это не критично - моя попытка выводить всё содержимое при 'открытии' дива. Пробовал с этим: word-wrap: break-word; - не получилось ...
В добавок нужно ограничить высоту этого открываемого дива, чтобы длинный текст не создавал его слишком большим, например, высотой max-height: 80px; С этим тоже у меня косяк, помогите плиз.
function openclose() {
let d = document.getElementById('mtc');
if (d.children[1].style.display === 'none') {
d.children[1].style.display = 'block';
d.children[2].style.display = 'block';
d.children[3].style.display = 'table';
d.children[3].style.width = 100 + '%';
} else {
d.children[1].style.display = 'none';
d.children[2].style.display = 'none';
d.children[3].style.display = 'block';
d.children[3].style.width = 82 + '%';
}
}html,
body {
width: 100%;
height: 100%;
margin: auto;
background-color: #f3e7d8;
}
* {
margin: 0;
padding: 0;
}
body {
overflow-y: hidden;
}
#msa,
#mta {
float: left;
height: 18px;
background: #953b39;
color: #3e1a01;
font-size: 13px;
}<div style="width: 160px; height: 100%; overflow: hidden;">
<div id="mtc" style="float: left; width: 100%; height: 18px; background: #49afcd;">
<div id="msa" style="width:18%;" onclick="openclose();"> ...</div>
<div style="float: left; width: 82%; height: 86px; display: none; background: lightcoral;"></div>
<div style="margin-top: 18px; width: 18%; height: 68px; display: none; background: yellow;"></div>
<div id="mta" style="width:82%; overflow: hidden;" onclick="">X01234567890_01234567890_01234567890 abc def 01234567890_01234567890_01234567890 Y01234567890_01234567890_01234567890 abc def 01234567890_01234567890_01234567890 Z01234567890_01234567890_01234567890 abc def 01234567890_01234567890_01234567890.</div>
<span
style="display:none;">0</span>
</div>
</div>