Как реализовать такой функционал на JS? [дубликат]

231

04 августа 2021, 11:50

На этот вопрос уже дан ответ здесь:

Как правильно скрыть часть текста? (1 ответ)

Закрыт 1 год назад.

есть стандартный функционал. Текст и кнопка читать подробнее. Проблема в том что текст не разделен на абзацы. А весь большой текс в один абзац ( тег p ). И требуется обрезать данную строку через js. - Это не проблема. Проблема в том как сделать что бы при клике на показать весь текст - показывался текст который мы уже обрезали. И если это даже понятно еще как сделать ( до того как обрезать сохранить весь текст в другой переменной ), то каким образом сделать что бы когда текст становится большим, это было хоть как то анимированно, а не просто текст добавился?

Answer 1

codepen

class Review { 
  constructor(node) { 
    this.node = node; 
 
    if (!this.node) return; 
 
    this.more = this.node.querySelector('.review__more'); 
    this.text = this.node.querySelector('.review__text'); 
 
    this.onMore = this.onMore.bind(this); 
 
    this.more.addEventListener('click', this.onMore, false); 
  } 
 
  onMore() { 
    this.node.classList.add('review_details'); 
 
    this.text.style.maxHeight = this.text.scrollHeight + 'px'; 
  } 
} 
 
const root = document.querySelector('.review'); 
 
new Review(root);

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
body { 
  font-family: "Roboto", sans-serif; 
  line-height: 1.6; 
} 
 
.review { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
} 
 
.review__inner { 
  border-radius: 12px; 
  padding: 30px; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 
  max-width: 450px; 
} 
 
.review__title { 
  font-size: 24px; 
  font-weight: 700; 
} 
 
.review__text { 
  margin: 12px 0; 
  max-height: 150px; 
  overflow: hidden; 
  position: relative; 
  transition: max-height 0.3s ease; 
} 
 
.review__text::after { 
  content: ""; 
  display: block; 
  position: absolute; 
  width: 100%; 
  height: 90px; 
  bottom: 0; 
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 95%); 
  transition: opacity 0.3s ease; 
} 
 
.review__more { 
  background: #1976d2; 
  padding: 6px 16px; 
  border-radius: 4px; 
  width: max-content; 
  color: #fff; 
  font-weight: 500; 
  cursor: pointer; 
  text-align: right; 
  transition: background, opacity 0.3s ease; 
} 
 
.review__more:hover { 
  background: #115293; 
} 
 
.review_details .review__text::after { 
  opacity: 0; 
} 
 
.review_details .review__more { 
  opacity: 0; 
  pointer-events: none; 
}

<div class="review"> 
  <div class="review__inner"> 
    <div class="review__title">Check our review</div> 
 
    <div class="review__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem dolore officia ea maiores tempore. Fugit dicta consequatur dolore excepturi velit, dolorem veniam optio. Quisquam possimus excepturi repellat explicabo esse, accusamus ad ut cum 
      libero beatae tempora quis in, adipisci temporibus iure provident? Porro tempora harum quia? Doloribus, architecto vel. Sequi pariatur debitis vitae modi nihil aliquid ab expedita odit inventore rem quos sit enim nam totam repellendus nemo iusto 
      at deleniti, cumque ipsa? Sequi doloremque asperiores nostrum dolor fuga molestiae id tempore, maiores ab atque autem assumenda eveniet recusandae explicabo, consequuntur ipsum? Laboriosam excepturi officiis esse quidem ipsam facere repellendus 
      eius quam nobis rerum. Laborum, ipsam sit. Ea similique temporibus ut harum, deserunt corrupti sequi magnam nihil soluta provident laboriosam, aliquid voluptas doloremque vel porro fuga consequatur ad nesciunt, veniam quasi hic voluptate? Vero, 
      consequuntur earum, minima accusantium, incidunt fuga explicabo delectus expedita quibusdam voluptatum deserunt saepe minus eos et!</div> 
 
    <div class="review__more">More</div> 
  </div> 
</div>

Answer 2

Могу предложить такой вариант, но его стоит использовать аккуратно, при большом кол-ве нижележащих элементов, браузеру приходится их перерисовывать

Используя CSS:

let p = document.querySelectorAll('p'); 
 
p.forEach(function(el) { 
  el.addEventListener('click', function() { 
    this.classList.toggle('active'); 
  }) 
})

p { 
  max-height: 100px; 
  overflow: hidden; 
  position: relative; 
  transition: max-height 300ms; 
  cursor: pointer; 
  background: #d5d5d5; 
  padding: 1rem; 
  user-select: none 
} 
 
p.active { 
  max-height: inherit 
} 
 
p::after { 
  content: ''; 
  background: linear-gradient(to top, white 20%, transparent); 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 40px; 
  transition: opacity 300ms; 
} 
 
p.active::after { 
  opacity: 0 
}

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem iste atque cupiditate laborum expedita assumenda. Natus earum alias rerum, atque delectus qui repellat? Sunt asperiores repudiandae porro ex repellendus soluta, quis eos numquam? Pariatur 
  laudantium libero eius beatae sint in error, ipsa vel voluptas minima, numquam cupiditate dolor ad provident obcaecati tempore! Culpa laudantium tempora repellendus atque illum asperiores, molestias optio sunt voluptas minima! Consequatur officia voluptates 
  quisquam qui, eligendi minima excepturi possimus modi sunt nisi sed natus et quia fuga eaque accusamus vel libero magni, corporis saepe asperiores sapiente. Qui incidunt, optio aut aliquid praesentium porro. Ducimus ut, veniam corrupti esse exercitationem 
  pariatur sequi? Vero eos non consequatur impedit odit exercitationem hic! Laborum tempore, reiciendis facere nihil alias velit omnis fugiat natus praesentium, consequuntur earum totam et provident id perspiciatis voluptatum ut. Voluptates reprehenderit 
  quae totam, veniam voluptate exercitationem deserunt quod ea, est, dolorum perspiciatis cupiditate at? Minima eos minus, beatae ducimus est dignissimos consequuntur, corrupti voluptatem pariatur blanditiis id itaque dolore reiciendis quidem sequi? Maxime 
  nobis libero ipsum aperiam saepe debitis illum ut, esse consequatur repellendus! Veniam quo itaque quos omnis libero a enim aspernatur necessitatibus neque. Rem nihil vel magni consequatur sit accusamus voluptatum sed dolor corrupti.</p> 
 
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem iste atque cupiditate laborum expedita assumenda. Natus earum alias rerum, atque delectus qui repellat? Sunt asperiores repudiandae porro ex repellendus soluta, quis eos numquam? Pariatur 
  laudantium libero eius beatae sint in error, ipsa vel voluptas minima, numquam cupiditate dolor ad provident obcaecati tempore! Culpa laudantium tempora repellendus atque illum asperiores, molestias optio sunt voluptas minima! Consequatur officia voluptates 
  quisquam qui, eligendi minima excepturi possimus modi sunt nisi sed natus et quia fuga eaque accusamus vel libero magni, corporis saepe asperiores sapiente. Qui incidunt, optio aut aliquid praesentium porro. Ducimus ut, veniam corrupti esse exercitationem 
  pariatur sequi? Vero eos non consequatur impedit odit exercitationem hic! Laborum tempore, reiciendis facere nihil alias velit omnis fugiat natus praesentium, consequuntur earum totam et provident id perspiciatis voluptatum ut. Voluptates reprehenderit 
  quae totam, veniam voluptate exercitationem deserunt quod ea, est, dolorum perspiciatis cupiditate at? Minima eos minus, beatae ducimus est dignissimos consequuntur, corrupti voluptatem pariatur blanditiis id itaque dolore reiciendis quidem sequi? Maxime 
  nobis libero ipsum aperiam saepe debitis illum ut, esse consequatur repellendus! Veniam quo itaque quos omnis libero a enim aspernatur necessitatibus neque. Rem nihil vel magni consequatur sit accusamus voluptatum sed dolor corrupti.</p>

Используя JS, печать можно сделать не по словам а по буквам по желанию:

let p = document.querySelectorAll('p'); 
 
p.forEach(function(el) { 
  if (el.innerHTML.length < 50) return; 
 
  el.temp = el.innerHTML.split(' '); 
  el.innerHTML = el.innerHTML.slice(0, 50) + '...'; 
  el.style.cursor = 'pointer'; 
 
  el.addEventListener('click', function() { 
    if (el.innerHTML.length < 60) { 
      el.innerHTML = ''; 
      for (let i = 0; i < el.temp.length; i++) { 
        setTimeout(function() { 
          el.innerHTML += el.temp[i] + ' '; 
        }, i * 10); 
      } 
    } else { 
      el.innerHTML = el.innerHTML.slice(0, 50) + '...'; 
    } 
  }) 
 
})

p { 
  background: #d5d5d5; 
  padding: 1rem; 
  user-select: none 
}

<p> test </p> 
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem iste atque cupiditate laborum expedita assumenda. Natus earum alias rerum, atque delectus qui repellat? Sunt asperiores repudiandae porro ex repellendus soluta, quis eos numquam? Pariatur 
  laudantium libero eius beatae sint in error, ipsa vel voluptas minima, numquam cupiditate dolor ad provident obcaecati tempore! Culpa laudantium tempora repellendus atque illum asperiores, molestias optio sunt voluptas minima! Consequatur officia voluptates 
  quisquam qui, eligendi minima excepturi possimus modi sunt nisi sed natus et quia fuga eaque accusamus vel libero magni, corporis saepe asperiores sapiente. Qui incidunt, optio aut aliquid praesentium porro. Ducimus ut, veniam corrupti esse exercitationem 
  pariatur sequi? Vero eos non consequatur impedit odit exercitationem hic! Laborum tempore, reiciendis facere nihil alias velit omnis fugiat natus praesentium, consequuntur earum totam et provident id perspiciatis voluptatum ut. Voluptates reprehenderit 
  quae totam, veniam voluptate exercitationem deserunt quod ea, est, dolorum perspiciatis cupiditate at? Minima eos minus, beatae ducimus est dignissimos consequuntur, corrupti voluptatem pariatur blanditiis id itaque dolore reiciendis quidem sequi? Maxime 
  nobis libero ipsum aperiam saepe debitis illum ut, esse consequatur repellendus! Veniam quo itaque quos omnis libero a enim aspernatur necessitatibus neque. Rem nihil vel magni consequatur sit accusamus voluptatum sed dolor corrupti.</p> 
 
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem iste atque cupiditate laborum expedita assumenda. Natus earum alias rerum, atque delectus qui repellat? Sunt asperiores repudiandae porro ex repellendus soluta, quis eos numquam? Pariatur 
  laudantium libero eius beatae sint in error, ipsa vel voluptas minima, numquam cupiditate dolor ad provident obcaecati tempore! Culpa laudantium tempora repellendus atque illum asperiores, molestias optio sunt voluptas minima! Consequatur officia voluptates 
  quisquam qui, eligendi minima excepturi possimus modi sunt nisi sed natus et quia fuga eaque accusamus vel libero magni, corporis saepe asperiores sapiente. Qui incidunt, optio aut aliquid praesentium porro. Ducimus ut, veniam corrupti esse exercitationem 
  pariatur sequi? Vero eos non consequatur impedit odit exercitationem hic! Laborum tempore, reiciendis facere nihil alias velit omnis fugiat natus praesentium, consequuntur earum totam et provident id perspiciatis voluptatum ut. Voluptates reprehenderit 
  quae totam, veniam voluptate exercitationem deserunt quod ea, est, dolorum perspiciatis cupiditate at? Minima eos minus, beatae ducimus est dignissimos consequuntur, corrupti voluptatem pariatur blanditiis id itaque dolore reiciendis quidem sequi? Maxime 
  nobis libero ipsum aperiam saepe debitis illum ut, esse consequatur repellendus! Veniam quo itaque quos omnis libero a enim aspernatur necessitatibus neque. Rem nihil vel magni consequatur sit accusamus voluptatum sed dolor corrupti.</p>