使用Javascript选择最后一次自动换行后的最后一行

Question

我正在这个网站上工作，正如你所看到的，我正在页面上最后一个<p>的最后一行进行打字。唯一的问题是，我的网站有点响应，并且包含最后一个<p>的<article>会更改宽度，足以更改最后一行的单词。

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

我想知道是否有一种方法可以用JavaScript选择最后一行，并将跨度应用于最后一行自动换行后的自动最后一个单词。

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

以下是最后一个<p>的实际代码，以防你们中的一些人不想打开链接：

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; }
}

<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>

Answer 1

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

这里有一个与查找换行符相关的问题：使用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>