How to hide part of text?

Question

Good evening, I would like to clarify how to correctly make a hiding feature for a long description, so that Googlebot can see it completely, while for users it appears as 3 lines with a "show more" button, like in the example: https://www.kinopoisk.ru/series/4365427/. My website itself is built on Nuxt 3.

Answer 1

You could toggle a data attribute on the button, and style the text/button with CSS.

document.addEventListener('click', e => {
  if (e.target.classList.contains('show-more')) {
    const
      btn = e.target,
      content = e.target.previousElementSibling,
      showAll = (btn.dataset.showAll ?? 'false') === 'true';
    content.classList.toggle('lines-all', !showAll);
    btn.dataset.showAll = !showAll;
  }
});

[class^="lines-"] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.lines-1 { -webkit-line-clamp: 1; }
.lines-2 { -webkit-line-clamp: 2; }
.lines-3 { -webkit-line-clamp: 3; }

.lines-all {
  -webkit-line-clamp: unset;
}

.show-more::after {
  content: 'Show More';
}

.show-more[data-show-all="true"]::after {
  content: 'Show Less';
}

<p class="lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="show-more"></button>
<p class="lines-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="show-more"></button>
<p class="lines-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="show-more"></button>