Изменить многоточие text-overflow: ellipsis на свой текст

Question

Есть "статьи", которые обрезаются с помощью text-overflow: ellipsis, для их раскрытия используется многоточие.

Нужно заменить его на свой текст (например, Подробнее ^, синим цветом)

Я так понимаю, что стандартными средствами с этим не справиться и нужен плагин, а в какую сторону смотреть не знаю.

Нашел только как можно эти три точки стилизовать, но не как изменить содержимое. Например, text-overflow: '...'; но это совсем не то

Также попробовал сделать как в этой статье с помощью js, но не смог придумать как сделать его в виде ссылки, как атрибут a, и оно работает в js fiddle, но не работает у меня в приложении

https://stackoverflow.com/questions/41549021/text-overflow-change-content-of-ellipsis

Answer 1

Вот рабочий прототип:

document.querySelectorAll(".drop-text").forEach(el => {
  const button = el.querySelector('.drop-button');
  button.addEventListener("click", () => {
    el.classList.toggle("closed");
    button.textContent = el.classList.contains('closed') ? 'Развернуть' : 'Свернуть';
  });
});

.drop-text {
  width: 280px;
  border: 1px solid black;
  border-radius: 18px;
  text-align: center;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
  overflow-y: hidden;
  display: inline-block;
}

h2 {
  font-size: 25px;
}

.drop-text div {
  word-break: break-word;
}

.drop-text.closed {
  height: 150px;
}

.drop-text .drop-button {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translate(-50%);
}

<div class="drop-text closed">
  <h2>Какой-то текст</h2>
  <div>Какой-нибудь случайный длинный текст для демонтрации работы виджета и его функционала и вообщеафвфцщшвлф зшвцофшзщвоцфщцшзво зщцвофшзцвозшфволфвош зшфовщфцвщгрфщцгврфзшарфцвзшгр фгвризыфшгаифзШГВИФАШЗФЗШАВФМИАШЗНМФЦЗАНФыхщуарыфхщовфщшцохшфцвadadawdadawdadadwawdadawd
  </div>
  <button class="drop-button">Развернуть</button>
</div>
<div class="drop-text closed">
  <h2>Какой-то текст</h2>
  <div>Какой-нибудь случайный длинный текст для демонтрации работы виджета и его функционала и вообщеафвфцщшвлф зшвцофшзщвоцфщцшзво зщцвофшзцвозшфволфвош зшфовщфцвщгрфщцгврфзшарфцвзшгр фгвризыфшгаифзШГВИФАШЗФЗШАВФМИАШЗНМФЦЗАНФыхщуарыфхщовфщшцохшфцвadadawdadawdadadwawdadawd
  </div>
  <button class="drop-button">Развернуть</button>
</div>
<div class="drop-text closed">
  <h2>Какой-то текст</h2>
  <div>Какой-нибудь случайный длинный текст для демонтрации работы виджета и его функционала и вообщеафвфцщшвлф зшвцофшзщвоцфщцшзво зщцвофшзцвозшфволфвош зшфовщфцвщгрфщцгврфзшарфцвзшгр фгвризыфшгаифзШГВИФАШЗФЗШАВФМИАШЗНМФЦЗАНФыхщуарыфхщовфщшцохшфцвadadawdadawdadadwawdadawd
  </div>
  <button class="drop-button">Развернуть</button>
</div>

Сейчас изменил на гораздо более короткий вариант, который к тому же работает для нескольких карточек, за вами стили)

БЛОГ НА HUSL

Изменить многоточие text-overflow: ellipsis на свой текст

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