主页 / 问题 / 1292329
Accepted
Monkey Mutant
Asked:2022-06-06 18:04:44 +0000 UTC2022-06-06 18:04:44 +0000 UTC

如何在任意长度的文本中获取字符串的最后三个字符？

  • 772

我想让任意长度的字符串中的最后三个字母从 1 到 0 透明

为了实现这一点，我尝试使用insertAdjacentHTM方法在行尾嵌入 svg > text并没有造成任何困难，但是在行尾获得三个字符并没有完全正确..

这是我的尝试：

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 方法不是故意添加的...

javascript

2 个回答

  1. Best Answer

    可以用渐变的伪元素叠加，“三个字符”可以用度量单位改变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>

    • 6

  2. 事情就是这样发生的

    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>

    • 3

相关问题