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

Question

[My1Name]

Как правильно скрывать и показывать длинный текст по событию onClick?
У меня на странице есть div-ный блок с некоторым текстом:

<div id="123" class="panel-body truncate-text" onClick="showAd()">
<a href="#"><img src="/media/No-logo.png" class="advert-logo"></a>
<p>Тут какой-то текст длиной до 2000 символов, но нужно показывать до 200 символов. По событию onClick блок должен развернуться. А если блок развёрнутый - свернуться.</p>

Класс "panel-body" - это Bootstrap core CSS; "truncate-text" - добавленный мною CSS следующего вида:

.truncate-text {
  background: white;
  overflow: hidden;
  height: 140px;
  position: relative;
}

.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(180deg, transparent, white 50%);
}

Далее javascript:

showAd();
function showAd() {
    obj = document.getElementById("123").getElementsByClassName("truncate-text");
    if( obj.style.height == "140px" ) { obj.style.height = "100%"; } else { obj.style.display = "140px"; }
}

Но скрипт почему-то не срабатывает... Что нужно исправить, чтоб всё работало правильно?

Comments

[imko]

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

[My1Name]

imko, я получаю следующий код ошибки в Console:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

Переписал немного CSS (сокращать текст до троеточия (без :after)

.truncate-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3em;
  height: 3.9em;
}

Вывел в отдельный блок текст:

<div id="123" class="panel-body truncate-text" onClick="showAd()">
<div class="truncate-text">
<p>Тут какой-то текст длиной до 2000 символов, но нужно показывать до 200 символов. По событию onClick блок должен развернуться. А если блок развёрнутый - свернуться.</p>
</div>
</div>

И немного поправил скрипт:

var obj = document.getElementById("123");
	div = obj.getElementsByClassName("truncate-text");
    if( div[0].style.height == "3.9em" ) {
....
}

Теперь просто ничего не происходит. Нет никаких сообщений об ошибках, но и ничего не меняется; текст не разворачивается.

[Ankhena]

My1Name, может, начать с подсчета символов? И получившихся строк?
Удобнее манипулировать классами, чем напрямую стилями. Если нужно передать получившийся размер, то делать это через кастомные свойства.
Например,

let lines = вычисляем;
item.style.setProperty('--lines', lines);

line-clamp: var(--lines, 4)
Так будет меньше проблем при возможных переопределениях.

А дальше почитать про text-overflow: ellipsis; и line-clamp

Answer 1

[My1Name]

Немного погуглив, решение нашлось на qna.habr и по ссылке https://www.tune-it.ru/web/leksa/blog/-/blogs/3044392 — хороший пример оформления. В целом (моё) решение выглядит следующим образом:

HTML

<div class="truncate-text">
<p>Тут какой-то текст длиной до 2000 символов, но нужно показывать до 200 символов. По событию onClick блок должен развернуться. А если блок развёрнутый - свернуться.
</p>
</div>

CSS

.truncate-text{
  height: 130px;
  overflow: hidden;
  position: relative;
}
.truncate-text.opener {
  height: auto;
}
.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, white 50%);
}
.truncate-text.opener:after {
  opacity: 0;
}

Javascript (jQuery)

<script>
    $('.truncate-text').click(function(){
        $('.truncate-text').toggleClass('opener');
    });
</script>

Можно ещё добавитьcursor: pointer; в стили, но как по мне - это лишнее. Если текст не завершённый, обычно человек тыкает на него пальцем интуитивно :)