Как в произвольной длине текста получить последние три символа строки?

Question

Я хочу сделать так что бы последние три буквы в строке произвольной длины были прозрачны от 1 до 0

Для реализации этого я пробую встроить svg > text прямо в конец строки методом insertAdjacentHTM и это не вызвало затруднений а не получилось именно получить в самом конце строки три символа..

Вот моя попытка:

let str = document.querySelector(".fade").innerHTML;
let txt = document.querySelector(".fade");

let spl = str.toLowerCase().split("");

console.log(spl)

let svg = `<svg width="100" height="20">
<defs>
 <linearGradient id="lg">
  <stop stop-color="green" offset="0"/>
  <stop stop-color="red" offset="1"/>
 </linearGradient>
</defs>
<text y="15" fill="url(#lg)"> ${spl}</text>
</svg>`;


txt.insertAdjacentHTML("beforeend", svg);

svg {
  display: inline-block;
  vertical-align: middle;
}

svg text {
  font-size: 15px;
  letter-spacing: 0.3px;
}

<div class="fade">
  Текст, последние 3 символа которого уходят в прозрачность
</div>

Как мне добиться желаемого результата ? метод join не дописал умышленно ...

Answer 1

вот так получилось

let str = document.querySelector(".fade").innerHTML;
let mass = [...str];

let txt = document.querySelector(".fade");

let temp = mass.splice(str.length - 4, str.length).join("");

console.log(mass.join(""));

let svg = `<svg width="100" height="20">
<defs>
 <linearGradient id="lg">
  <stop stop-color="#000" offset="0"/>
  <stop stop-color="#fff" offset="1"/>
 </linearGradient>
</defs>
<text x="1" y="14" fill="url(#lg)"> ${temp}</text>
</svg>`;

txt.insertAdjacentHTML("beforeend", svg);

txt.innerHTML = mass.join("") + svg;

svg {
  display: inline-block;
  vertical-align: middle;
}

svg text {
  font-size: 15px;
}

<div class="fade">
  Текст, последние 3 символа которого уходят в прозрачность
</div>

Answer 2

Можно перекрыть псевдоэлементом с градиентом, а "три символа" изменить при помощи единицы измерения ch.

span {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

span::before {
  content: '';
  display: block;
  width: 3ch;
  height: 100%;
  background: linear-gradient(to right, transparent, white);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

<span>Текст, последние 3 символа которого уходят в прозрачно ст</span>

БЛОГ НА HUSL

Как в произвольной длине текста получить последние три символа строки?

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