Webmaster Forum / HTML, CSS, Scripts / CSS / January 2007

I have some values that may be listed in a tall, narrow area or may be
side-by-side on a single line like:

   Foo: 1234
   Bar: ASDF
   Baz: This is a test

or

  Foo: 1234   Bar: ASDF  Baz: This is a test

What I *don't* want is:

  Foo: 1234  Bar: ASDF
  Baz: This is a test

I've tried something like:

  <span class='x'>Foo: 1234</span>
  <span class='x'>Bar: ASDF</span>
  <span class='x'>Baz: This is a test</span>

Where x has white-space: nowrap or other settings as needed to keep
the spans together.
But I haven't figured out a way to use CSS to tell the browser "all on
one line *or* one-per-line".  I considered

  <span class='x'>Foo: 1234</span><br>
  <span class='x'>Bar: ASDF</span><br>
  <span class='x'>Baz: This is a test</span>

or something if there was a way to make the <br> a wide space or a
bullet or something then I could set the style of the <br> to either
break the line or not.  Maybe I could put a class on the <br> and set
it's display property to none or inline or something.  Any better
ideas?