CSS for self-paced reading 'underlines' differs in effect on chrome and firefox

[n-kall]

In the speaker-knowledge experiment (https://github.com/magpie-ea/magpie-speaker-knowledge) the 'target' sentences need to be on a new line. I accomplished this by adding <br/> in the corresponding places in the trial data:
e.g.

sentence: `This | is | the | first | example | paragraph.<br/> | You | will | see | two | more | examples | for | practice.`

Then customising the CSS like so, in order to actually show the new lines:

.magpie-spr-sentence .spr-word {
    display: inline;
}

This solution work for Firefox, but not for Chrome.

In Chrome, the word that 'includes' the break does not get underlined.

Firefox:

Chromium:

[JannisBush]

Confirmed the "bug" and it is even worse. When chrome adds an automatic line break because of limited space, then the last word (for in the following example) does not get underlined either.

The reason seems to be that chrome binds the new line character (<br>) to the start of the newline whereas firefox binds the new line character to the end of the old line. (The underline thus has a length of 0 in chrome)

We can probably add a special symbol in the input ( e.g. | #br# |) and change the spr view to parse it into a line break to fix the first problem. To fix the second issue we probably would have to rethink the complete underlining process and do not use the ::after property.