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

From: miriam at f2o.org (Miriam Frost)
Date: Thu, 24 Apr 2003 13:10:50 -0500

>
>
> Here's my tip: create a <span> with a single space in it, like so:
> <a href="/">Professional and<span> </span>Trade Information</a>
> ...and then style that span as "display: block;".
> Now, without a stylesheet, you'll get the full link on one line - with a
> space in the middle - but, in the styled version, the span will go on 
> to a
> new line, but not actually show anything as there's only white-space 
> in it,
> so it collapses.
> There you have it - a CSS-only line break.
>
Yow!
I think I'll stick with my smaller <br />'s.

Why is there anything inherently wrong with line breaks -- isn't

<p>
123 Trogdor St.<br />
Strongbadia, Wherever<br />
</p>

better than
p.address {margin: 0;}
<p class="address">123 Trogdor St.</p>
<p class="address">Strongbadia, Wherever</p>    ?

besos
Miriam

-- 
http://www.surebluestudios.com

---

From: miriam at f2o.org (Miriam Frost)
Date: Thu, 24 Apr 2003 13:28:20 -0500

> so it collapses. There you have it - a CSS-only line break. 

Yow!

<p>
123 Trogdor St.<br />

better than
p.address {margin: 0;}

besos
Miriam

---

From: miriam at f2o.org (Miriam Frost)
Date: Thu, 24 Apr 2003 13:28:53 -0500

> Strongbadia, Wherever<br />

I suppose one could do similar with a list...
<ul>
<li>123 Trogdor St.</li>
<li>Strongbadia, Wherever</li>
</ul>

but that's not really a list, is it, and is therefore just as 
semantically meaningless as a <br />?
Hrrm.

besos
Miriam

---

From: ian at hixie.ch (Ian Hickson)
Date: Thu, 24 Apr 2003 12:02:24 -0700 (PDT)

> <p class="address">Strongbadia, Wherever</p>    ?

Yes, it is. Even better is:

   <address>
   123 Trogdor St.<br>
   Strongbadia, Wherever<br>
   </address>

<br> is only wrong when used to separate paragraphs, as in:

   Foo Bar.<br>
   <br>
   Baz.<br>
   <br>

...which would be better as:

   <p> Foo Bar. </p>
   <p> Baz. </p>

-- 
Ian Hickson                                      )\._.,--....,'``.    fL
"meow"                                          /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'

---

From: miriam at f2o.org (Miriam Frost)
Date: Thu, 24 Apr 2003 14:04:35 -0500

>   Strongbadia, Wherever<br>
D'oh!
I have cause to use <address> so infrequently that it completely slipped 
my mind.
Off to wash the egg from my face....

besos
Miriam

---

From: samuel at latchman.org (Sam Latchman)
Date: Thu, 24 Apr 2003 21:30:20 +0200

If semantics is what you're aiming for, what you need is

address {margin: 0;}
<address>123 Trogdor St.</address>
<address>Strongbadia, Wherever</address>

with possibly some class="street", class="city"...

::Sam

-- 
Samuel Latchman
-----------------
web designer [fr]
http://www.latchman.org/sam/

---

From: steve at mrclay.org (Steve Clay)
Date: Thu, 24 Apr 2003 17:05:41 -0400

Thursday, April 24, 2003, 3:02:24 PM, Ian Hickson wrote:
IH> <br> is only wrong when used to separate paragraphs

There are other instances where a line-break is visually preferred in
a certain place (rather than left to natural flow).  IMO, these cases
warrant an alternate line-break solution.

Say you have a heading that's just a tad too long for a single line:

|  Welcome to My Page About Race  |
|  Cars                           |

and you might want:

|       Welcome to My Page        |
|        About Race Cars          |

A <br /> just really doesn't make sense structurally and playing with
margins/padding until it wraps where you want is less-than-ideal (what
if the user chooses a slightly bigger/different font).

You could use non-breaking spaces to do something like:

<h1>Welcome&nbsp;to&nbsp;My&nbsp;Page About&nbsp;Race&nbsp;Cars</h1>

But this seems more elegant and content-friendly:

<h1>Welcome to My Page<span class="br"> </span>About Race Cars</h1>

Steve
-- 
http://mrclay.org

---

From: msauers at bcr.org (Michael Sauers)
Date: Thu, 24 Apr 2003 15:39:00 -0600

Steve;

You've just lost me completely. You're suggesting that <br /> doesn't make
sense to break a line into two but that we should span a space and classify
it as "br" (which you didn't say what that class is defined as) instead.

Why oh why would I do that? Why doesn't <br /> make sense structurally? Why
do you suggest almost 15x the amount of code instead. This just doesn't make
sense to me. Did I miss something in your explanation?

--------------------------------------------------
Michael Sauers, Librarian, Trainer & Author
Bibliographical Center for Research (BCR)
Aurora, CO :: 303-751-6277 x124 :: [email-masked]
--------------------------------------------------

---

From: ian at hixie.ch (Ian Hickson)
Date: Thu, 24 Apr 2003 16:01:36 -0700 (PDT)

> with possibly some class="street", class="city"...

<address> is a block-level element, it contains a single block address
(well, actually, a single block of contact information).

The above markup would be two addresses, not one. One address should be
marked up with one <address> element, with lineBReaks marked up with <br>.

<br> is fine, it's only "evil" when it is used to do something that is
strictly presentational. An address has multiple lines even when you read
it out over the phone, so <br> makes sense.