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

Hello.

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style>
    p { border: 1px solid black; }
    .blanc{ background-color: white; }
    .bleu{ background-color: cyan; }
    .justifier { text-align: justify; }
  </style>
  <title>Last line coloured</title>
</head>
 
<body>
  <p class="bleu justifier"><span class="blanc">The end of the last line should be blue.</span></p>
</body>
</html>

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

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?