Select the last line after last automatic line break with Javascript

Question

I'm working on this website and as you can see I'm making a typing effect on the last line of the last  on the page. The only problem is that my website is somewhat responsive and the <article> containing the last  changes width, enough to change the words on the last line.

Right now, my effect is working with a  preceded by a   but it looks weird if you got a large monitor.

I wondered if there was a way to select the last line with JavaScript and apply the span to the automatic last words happening after the last line automatic break.

It needs to be in JavaScript, I do not want to load jQuery for such a small website.

Here is the actual code of the last  in case some of you dont want to open the link:

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>

which line do you want to select? Justin Bieber? – Cruiser Nov 12 '15 at 18:26 — Cruiser, Nov 12 '15 at 18:26

score 0 · Answer 1 · answered Nov 12 '15 at 18:28

0

Consider wrapping the last line with an element that has an id attached to it. If there's no other way around it:

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

Then your JS looks like:

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

answered Nov 12 '15 at 18:28

Cruiser

1,618
2
16
20

score 0 · Answer 2 · answered Nov 12 '15 at 18:51

Why not just animate max-width rather than 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>

score 0 · Accepted Answer · edited May 23 '17 at 11:51

If I understand correctly, you'd like to have WHATEVER text makes it to the last line use your typing animation. This is going to be nearly impossible without jQuery. The problem is detecting automatic line breaks with pure JS.

Here's a question relevant to finding line breaks: detecting line-breaks with jQuery?

and a fiddle that should give you a general idea of how you'd accomplish scrolling just the last line: 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);

Note: I used "||" to indicate a line break while you would need to detect them with jQuery.

Yes you understood correctly, I'll go check this jQuery option you've given me! Thank you — , Nov 12 '15 at 19:12
That's fairly over kill for just a small effect... I guess I'll give up on this one not too much of a big deal — , Nov 12 '15 at 19:16

Select the last line after last automatic line break with Javascript

3 Answers3