Как скрыть часть текста в блоке?

Question

[L1nw0od]

Здравствуйте, скажите пожалуйста есть блок в нем есть текст, я делаю проверку на количество знаков и хоче если знаков больше 100 то скрывать знаки которые идут послее 100 а если знаков меньше 100 то отображать их.
Я изучаю JS - (спасибо)
---

let btn = document.querySelector('.btn__hide--text')
let wrapperText = document.querySelector('.wrapper__text')
let textDecription = document.querySelector('.trainer__description')
let creatTagA = document.createElement('a')

if (wrapperText.textContent.length < 100) {
	console.log('мнеьше 100')
} else {
	
	creatTagA.className = 'btn__more'
	creatTagA.setAttribute('href', '#')
	creatTagA.innerHTML = 'go go go'

	textDecription.append(creatTagA)
	console.log('больше 100')
}

Answer 1

[Дмитрий Беляев]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

creatTagA.textContent = wrapperText.textContent.slice(0, 100);

Comments

[L1nw0od]

Скажите пожалуйста а будет ли правильным таким образом возвращать строку и реализовывать этот функционал ?
---
Вообще задача вот такая. Задачу такую придумал сам себя дабы пройтись по изученному материалу.

// Если количество знаков больше 100 добавляем кнопку читать далее.
// Если количество знаков меньще 100 кнопку не добавляем
// При клике на кнопку будет открываться весь оставшийся текст.
// После того как текст открылся на кнопке читать дальше меняем текст на "свернуть"
// При клике на кнопку "свернуть" сворачиваем в исходное положение

[Дмитрий Беляев]

L1nw0od, если по правильному, то это делается явно не по длине строки. Разные символы имеют разный размер, если мы конечно не с моноширным шрифтом имеем дело. На глаз гораздо приятнее когда несколько блоков одного размера. Соответственно и текст надо скрывать не по символам, а по занимаемому месту.
Вообще с этим прекрасно справится CSS, а значит на JS это делать не стоит, JS тут максимум класс должен перещелкивать по нажатию на кнопку "далее"

[L1nw0od]

Дмитрий Беляев, Каким образом цсс будет это скрывать ?
---
К примеру 1000 знаков нужно чтоб изначально отображалось 100 и кнопка, если текст меньше 100 то только текст без кнопки. ?

[Дмитрий Беляев]

L1nw0od, почему именно 100, а не скажем 101?

Answer 2

[Artem Nanavov]

const sliceStr = (str: string, maxLen: number): string => {
  if (str.length > maxLen) {
    return str.slice(0, maxLen);
  }

  return str;
}

можно еще в конце добавлять ... чтоб было понятно что текст обрезан, но это уже вам так сказать как домашние задание)

Comments

[L1nw0od]

Я просто не хочу делать кривой кусок - (добавить класс отобразить блок/убрать класс- скрыть блок)
Хочу сделать нормально и правильно.
---
Я уже добавил кнопку. Теперь столкунлся с другой проблемой ( Нужно чтоб при клике на ту кнопку отображался весь текст обратно.
---

// Если количество знаков больше 100 добавляем кнопку читать далее.
// Если количество знаков меньще 100 кнопку не добавляем
// При клике на кнопку будет открываться весь оставшийся текст.
// После того как текст открылся на кнопке читать дальше меняем текст на "свернуть"
// При клике на кнопку "свернуть" сворачиваем в исходное положение