No replies's picture
Last seen: 7 years 21 weeks ago
Timezone: GMT+8
Joined: 2013-03-06
Posts: 1
Points: 2


I'd like to add a coloured horizontal bar at the end of the last line of a paragraph. I nearly get this, except that, when the screen is so narrow that only one word fits a line, then the colour bar appears at the end of that line too, which is not desired. In practise, this means that my solution doesn't work for handhelds. Here it is:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    p { border: 1px solid black; }
    .blanc{ background-color: white; }
    .bleu{ background-color: cyan; }
    .justifier { text-align: justify; }
  <title>Last line coloured</title>
  <p class="bleu justifier"><span class="blanc">The end of the last line should be blue.</span></p>

For a large screen, I get the desire effect:
For a narrow screen, I get colour on lines other than the last one, which is not desired:

The real problem regards titles on this site (temporary address):
(See the title "Présentation du magazine")

Do you have an idea to achieve this?