Как обрезать текст, сохраняя абзацы?

Question

Как обрезать текст у всех <p>, которые находятся внутри <div class="seo-text">, сохраняя абзацы с функцией показать больше/скрыть?

Пробовал по советам и форумам в интернете, но везде возникала следующая проблема:
- текст скрывается
- текст раскрывается, но сноятся все <p>

<div class="seo-text">
   <p>Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста.</p>
   
      <p>Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста.</p>
      
         <p>Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста.</p>
</div>

Answer 1

Нашел ответ сам, пораскинув мозгами.

jQuery(document).ready(function($) {
  document.querySelector(".hide").onclick = function() {
    var r = document.querySelector(".seo-text").classList.toggle("move");
    this.textContent = r ? "Заезд" : "Въезд";
  }
});

.seo-text {
  height: 60px;
  overflow: hidden;
  position: relative;
}

.move {
  height: unset;
}

.hide {
  position: absolute;
  bottom: 0;
  transform: translate(-50%, 10px);
  left: 50%;
  overflow: hidden;
  right: 50%;
  display: block;
  font-size: 0;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  box-shadow: 0 0 17px -5px #00000059;
  border: 1px solid #0000000f;
  z-index: 4;
}

.hide::before {
  content: '';
  width: 50%;
  height: 50%;
  position: absolute;
  background-image: url(https://cdn.icon-icons.com/icons2/936/PNG/512/angle-arrow-down_icon-icons.com_73683.png);
  left: 50%;
  background-size: 63%;
  background-position: center center;
  background-repeat: no-repeat;
  right: 50%;
  opacity: 0.8;
  top: 56%;
  bottom: 50%;
  transform: translate(-50%, -50%);
}

<div class="seo-text">
  <p>Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста.</p>

  <p>Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста.</p>

  <p>Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста.</p>
  <button class="hide"></button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как обрезать текст, сохраняя абзацы?

Ответы (1 шт):