Зажим линии на динамике c содержание в усадьбе Laravel

Question

У меня есть фрагмент кода, в котором есть контент, извлеченный из базы данных. Затем этот контент отображается в моем представлении, однако он слишком длинный, чтобы его можно было красиво показать на мобильном устройстве, как я могу применить кнопку «Показать больше / показать меньше» для контента, который динамически добавляется из базы данных.

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <h2 class="font-weight-bold">{{$pageData['title']}}</h2>
    <p>{!! $pageData['content'] !!}</p> <!-- This needs to be clamped -->
</div>

Под есть пример того, что я имею в виду:

Я пробовал следующее, работает для жестко запрограммированного контента: HTML:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <h2><strong>About</strong></h2>
    <p>Non hidden content</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><br/>
    <p id="mobile-extra-content" class="mobile-extra-content">hidden content</p>
    <button id="read-more-about" class="read-more btn btn-link-secondary">Toon meer &nbsp; <span 
    class="fa fa-angle-down"></span></button>
</div>

А затем измените то, что показано, используя этот скрипт:

document.getElementById("read-more-about").addEventListener( 'click' , changeClassAbout);

function changeClassAbout() {
            var content = document.getElementById("mobile-extra-content");
            var btn = document.getElementById("read-more-about");
            content.classList.toggle('show');

            if (content.classList.contains("show")) {
                btn.innerHTML = "Toon minder &nbsp; <span class=\'fa fa-angle-up\'></span>";
            } else {
                btn.innerHTML = "Toon meer &nbsp; <span class=\'fa fa-angle-down\'></span>";
            }
        }

Но поскольку я не могу (или не делаю этого) я не знаю как), чтобы разделить переменную {!! $pageData['content'] !!} пополам, я не могу использовать для этого тот же самый метод.