Как поставить надпись вместо троеточия при сокрытии части текста?

Question

[rillkoff]

На сайте требуется скрывать часть текста, если его объем слишком велик и раскрывать его при нажатии на кнопку "читать дальше" в конце текста. Сокрытие реализовал через

display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
overflow: hidden;

Но в конце текста ставится троеточие, с которым ничего нельзя сделать, ни отследить, ни изменить(или я плохо гуглил), есть варианты как можно реализовать желаемое?

Comments

[WapSter]

При помощи js обрезать текст и вставлять кнопку, вешать на кнопку событие и раскрывать текст в нем.
Только так

[rillkoff]

WapSter, поправьте если не так. То есть ищу все нужные теги на сайте, закидываю текст в массив и считываю количество элементов и, если их больше n, то куда-то помещаю оставшееся и иннером вставляю нужный текст?

Answer 1

[Максим]

Я для тебя и себя задал вопрос на stackoverflow

Comments

[rillkoff]

Спасибо большое!

[rillkoff]

Что-то вообще не получается адаптировать под множество подобный блоков на странице:( Логику работы понял, но банальный цикл и поиск всех селекторов не срабатывает. Каждый абзац обрезается, но при нажатии "показать больше" появляется "показать меньше", при этом сам текст не раскрывается и кнопка "показать больше остается".

let isHidden = true;
const desc = document.querySelectorAll('.service_info_text');

computeState();

function computeState() {
for (let i = 0; i < desc.length; i++) {
if (isHidden) {
desc[i].innerHTML = desc[i].innerHTML.split("", 440)
.join("")
.toLowerCase()
.padEnd(443, ".") + 'Показать весь';
} else {
desc[i].innerHTML = desc[i].innerHTML + 'Показать меньше';
}}
let hide = document.querySelectorAll(".text_hide");
for (let i = 0; i < hide.length; i++){
hide[i].addEventListener("click", () => {
isHidden = !isHidden;
computeState();
});
}
}

[rillkoff]

rillkoff, немного подправил, но теперь открываются и закрываются все блоки сразу

var isHidden = true;
var desc = document.querySelectorAll('.service_info_text');
var text = [];
var text_hide = [];

for (let i = 0; i < desc.length; i++) {
text[i] = desc[i].innerHTML;
}
computeState();

function computeState() {
for (let i = 0; i < desc.length; i++) {
if (isHidden) {
desc[i].innerHTML = text[i].split("", 540)
.join("")
.padEnd(543, ".") + ' Показать весь';
} else {
desc[i].innerHTML = text[i] + ' Показать меньше';
}
}
text_hide = document.querySelectorAll(".text_hide");
for (let i = 0; i < desc.length; i++) {
text_hide[i].addEventListener("click", () => {
isHidden = !isHidden;
computeState();
});
}
}

[Максим]

rillkoff, их перебрать надо forEach (el) и это событие вешать на el