Subject: [css-d] CSS-only line break (a tip)

From: steve at mrclay.org (Steve Clay)
Date: Thu, 24 Apr 2003 13:40:08 -0400

Thursday, April 24, 2003, 8:09:55 AM, Seb wrote:
S> <a href="/">Professional and<span> </span>Trade Information</a>
S> ...and then style that span as "display: block;".

This is a good way to stop using another purely presentational
element.  You might also want to specify font-size:0; height:0 just to
be sure the space within doesn't give you a 1em tall block.

There is a small catch in this display:block method, though: Inline
elements, such as A, are not supposed to contain blocks (as we've told
span to render), so, even though it's valid HTML/CSS, there could be
unexpected behavior/rendering. 

Another technique would be:

span {
   white-space:pre-line; /* gets rid of the space (CSS2.1) */
}
span:after {
   content:"\A";         /* generated line-break */
}

Steve
-- 
http://mrclay.org

---

From: steve at mrclay.org (Steve Clay)
Date: Fri, 25 Apr 2003 00:06:08 -0400

Thursday, April 24, 2003, 8:09:55 AM, Seb wrote:
S> I was trying to find a method of creating a line break in the middle of a
S> line of text, but without using a <br> tag - so that, if viewed without
S> stylesheets, there would be no break.

Since this thread is surely getting boring, I put together a demo page
for the methods described by Seb and I:
http://mrclay.org/junk/thebreaks

Steve
-- 
http://mrclay.org/

---

From: stephen.thomas at adelaide.edu.au (Steve Thomas)
Date: Fri, 25 Apr 2003 14:24:35 +0930

> http://mrclay.org/junk/thebreaks

Nice page!

I notice you used

	white-space:pre-line;

whereas the CSS2 spec at W3 has

	white-space:pre;

Is this something new? Or a typo?

I would also like to offer one further suggestion, using 
whitespace:pre, which seems even simpler to me: simply stick in 
the line breaks where you want them, as in this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="content-type"
  content="text/html; charset=ISO-8859-1">
   <meta name="author" content="Steve Thomas">
   <title>Test</title>
   <style type="text/css">
     h1 { text-align: center; }
     h1#pref { white-space:pre; }
   </style>
</head>
<body>
<h1 id="pref">Dr. Strangelove,<br>
or:<br>
How I Learned To Stop Worrying And Love The Bomb</h1>
<p>Blah blah blah</p>
</body>
</html>

On browsers which don't implement whitespace, this will degrade 
nicely. Those that do will display the heading precisely as you 
want. (With the caveat that whitespace:pre will keep each line 
as given, even with narrow windows, requiring scrolling.)

Above all, this preserves the semantic integrity of the heading 
intact, without the need to embed coding.

Steve

-- 
Stephen Thomas,
Senior Systems Analyst,
Adelaide University Library
ADELAIDE UNIVERSITY SA 5005
AUSTRALIA
Tel: +61 8 8303 5190  Fax: +61 8 8303 4369
Email: [email-masked]
URL: http://staff.library.adelaide.edu.au/~sthomas/

---

From: gleemax at attbi.com (John Lewis)
Date: Fri, 25 Apr 2003 00:10:45 -0500

> Is this something new? Or a typo?

It's new in CSS 2.1, which is not yet a recommendation:
<http://www.w3.org/TR/CSS21/text.html#white-space-prop>

-- 
John Lewis

---

From: stephen.thomas at adelaide.edu.au (Steve Thomas)
Date: Fri, 25 Apr 2003 15:06:24 +0930

John Lewis wrote:
> <http://www.w3.org/TR/CSS21/text.html#white-space-prop
> 

Thanks. And amazingly, although not yet even a recommendation, 
it works! (In Moz 1.2.1 anyway)

I guess on reflection, that gives you an insight into how these 
standards are generated in the first place. :-)

Regards,
Steve

---

From: stephen.thomas at adelaide.edu.au (Steve Thomas)
Date: Fri, 25 Apr 2003 19:48:47 +0930

Arrgghh! Apologies to all, my HTML editor mangled my example 
code, which should of course NOT have <br> tags in the middle of 
the header. Here's the corrected version (at the risk of 
prolonging the bordom):

...

<h1 id="pref">Dr. Strangelove,
or:

(And no, whitespace:pre-line; doesn't work in Moz1.2.1/PC.)

Hopefully that makes more sense than the previous post.

Steve