Selecting the last line of a <p> element

Question

I am aware of the :first-line selector in CSS, but I cannot find anything that will allow me to select the last line.

The reason I am trying to select the last line is because I want to be able to define the text-overflow and white-space attributes of the last line.

I am trying to avoid using JavaScript to form a solution.

Answer 1

Unfortunately there is no CSS selector that would apply.

You can however select the first line using the pseudo element :first-line. Unfortunately at the moment there is no equivalent for the last line.

Answer 2

IIRC, the only css control over the last line is text-align:

text-align-last: right;

I'm afraid javascript, or actually wrapping the last line in a span and styling that, is the only way. Below is the JS for reference.

var thetext = document.getElementById('some_element').innerHTML.split(/\r?\n/);
alert(thetext[thetext.length - 1]);