我正在寻求关于我的代码的帮助。它用div标签 Package 每一行文本。然而,问题是它不考虑HTML标签,如<a> or <span>
。我正在努力弄清楚如何修改它以保留文本中的这些HTML标签。任何帮助都将不胜感激,因为我自己无法解决这个问题。
// Wrapping lines
function splitLines(container, opentag, closingtag) {
let $lines = container.children,
$top = 0,
$tmp = "";
container.innerHTML = container.textContent.replace(/\S+/g, "<n>$&</n>");
for (let i = 0; i < $lines.length; i++) {
let $rect = $lines[i].getBoundingClientRect().top;
if ($top < $rect) $tmp += closingtag + opentag;
$top = $rect;
$tmp += $lines[i].textContent + " ";
}
container.innerHTML = $tmp += closingtag;
}
splitLines( $(".wrap-lines")[0], '<div class="line-wrap"><div class="line">', "</div></div>" );
/* Button */
let $button = gsap.from(".line", { duration: 0.5, yPercent: 100, stagger: 0.2, clearProps:"all" });
$(".btn-lines").on("click", function() {
$button.restart();
});
body {
padding: 5% 10%;
line-height: 1.2;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
h1 {
font-size: 24px;
}
p {
font-size: 21px;
}
p span {
background-color: red;
color: white;
}
.line-wrap {
display: inline-flex;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<div class="container">
<!-- With wrapping lines -->
<h1>With wrapping lines (HTML tags don't work)</h1>
<p class="wrap-lines">Lorem ipsum dolor sit, amet <a href="">consectetur</a> adipisicing elit. Animi dolorem quasi aut dolore porro <span>iusto in facilis</span>, molestias nostrum possimus ipsum laboriosam dolorum voluptatibus praesentium consequuntur! Culpa quas nisi hic.</p>
<button class="btn-lines">Animate Lines</button>
<br>
<br>
<!-- Without wrapping lines -->
<h1>Without wrapping lines (HTML tags work)</h1>
<p>Lorem ipsum dolor sit, amet <a href="">consectetur</a> adipisicing elit. Animi dolorem quasi aut dolore porro <span>iusto in facilis</span>, molestias nostrum possimus ipsum laboriosam dolorum voluptatibus praesentium consequuntur! Culpa quas nisi hic.</p>
</div>
2条答案
按热度按时间xbp102n01#
您面临的问题源于这样一个事实,即当您用HTML标记替换文本内容时,它会丢失现有的HTML结构。
更新(5.58pm IST)
字符串
0qx6xfy62#
使用
$lines[i].outerHTML
而不是$lines[i].textContent
,这样您就可以获得标记的整个HTML,而不仅仅是它的文本。