使用Javascript

Question

我正在处理this website，因为您可以看到我在页面上最后一行<p>的最后一行打字。唯一的问题是我的网站有些响应，<article>包含最后<p>更改宽度，足以更改最后一行的字词。

现在，我的效果是<span>前面有一个<br />，但如果你有一个大显示器，它看起来很奇怪。

我想知道是否有办法用JavaScript选择最后一行并将跨度应用于最后一行自动中断后发生的自动最后一个单词。

它需要在JavaScript中，我不想为这么小的网站加载jQuery。

以下是上次<p>的实际代码，以防有些人不想打开链接：

＆＃13;

＆＃13;

p{width:50%;text-align:right;}
span#typing {
    width: 377.96875px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    -webkit-animation: type 5s steps(70, end);
    animation: type 5s steps(70, end);
}
@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

＆＃13;

<p>
    Jack Ü a également joué au Ultra Music Festival en 2015 avec l'ensemble du "Jack Ü crew", avec contributions en direct
    <br />
    <span id="typing">
        de
        <a target="_blank" href="https://en.wikipedia.org/wiki/CL_(singer)">CL</a>,
        <a target="_blank" href="https://en.wikipedia.org/wiki/Kai_(Alessia_De_Gasperis_Brigante)">Kai</a>,
        <a target="_blank" href="https://en.wikipedia.org/wiki/Sean_Combs">Diddy</a>,
        <a target="_blank" href="https://en.wikipedia.org/wiki/Kiesza">Kiesza</a>,
        et
        <a target="_blank" href="https://en.wikipedia.org/wiki/Justin_Bieber">Justin Bieber</a>.
    </span>
    <span class="blink"></span>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解正确，你希望WHATEVER文本使它到最后一行使用你的打字动画。没有jQuery，这几乎是不可能的。问题是使用纯JS检测自动换行。

以下是与查找换行符相关的问题：detecting line-breaks with jQuery?

和一个小提琴，应该让你大致了解你将如何完成 滚动最后一行：https://jsfiddle.net/jrm8gbLd/1/

var element = document.getElementById("autoParagraph");
var paragraph = element.innerHTML;
var splitText = paragraph.split("||");
var typingText = document.createElement("SPAN");
typingText.setAttribute("id", "typing");
typingText.innerHTML = splitText[splitText.length - 1];
element.appendChild(typingText);

注意：我使用“||”在需要使用jQuery检测它们时指示换行符。

Answer 2

考虑使用附加了id的元素包装最后一行。如果没有别的办法：

<span id="last-line">//last line content</span>

然后你的JS看起来像：

document.getElementById("last-line") //and do stuff

Answer 3

为什么不只是动画max-width而不是width？

p{width:50%;text-align:right;}
span#typing {
    max-width: 377.96875px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    -webkit-animation: type 5s steps(70, end);
    animation: type 5s steps(70, end);
}
@keyframes type{
    from { max-width: 0; }
}

@-webkit-keyframes type{
    from { max-width: 0; }
}

<p>
    Jack Ü a également joué au Ultra Music Festival en 2015 avec l'ensemble du "Jack Ü crew", avec contributions en direct
    <br />
    <span id="typing">
        de
        <a target="_blank" href="https://en.wikipedia.org/wiki/CL_(singer)">CL</a>,
        <a target="_blank" href="https://en.wikipedia.org/wiki/Kai_(Alessia_De_Gasperis_Brigante)">Kai</a>,
        <a target="_blank" href="https://en.wikipedia.org/wiki/Sean_Combs">Diddy</a>,
        <a target="_blank" href="https://en.wikipedia.org/wiki/Kiesza">Kiesza</a>,
        et
        <a target="_blank" href="https://en.wikipedia.org/wiki/Justin_Bieber">Justin Bieber</a>.
    </span>
    <span class="blink"></span>
</p>