Controlling line breaks with CSS

[Chris Nelson]

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 <bra wide space or a
bullet or something then I could set the style of the <brto either
break the line or not. Maybe I could put a class on the <brand set
it's display property to none or inline or something. Any better
ideas?

[Jim Moe]

Re: Controlling line breaks with CSS

Chris Nelson wrote:

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.
>

You need to wrap the <span>s in a <pwith the nowrap attribute.
Applying to the spans has no effect outside of the spans.

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
>

Add "display:bl ock" to x to get the vertical layout. Leave it out for
one-per-line.


--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[boclair]

Re: Controlling line breaks with CSS

Chris Nelson wrote:

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
>

This looks like a list to me.

Louise

[Andy Dingley]

Re: Controlling line breaks with CSS

On 29 Jan, 19:50, "Chris Nelson" <cnel...@nycap. rr.comwrote:

What I *don't* want is:
>
Foo: 1234 Bar: ASDF
Baz: This is a test

Place each of the three in a block element, set the same explicit
width on each (in ems, please) and then float them. Although there's
no way (AFAIK) to say "never break between two unless you break
between all of them" this is a reasonable approximation to it.

If you want it perfect, then use JavaScript. Measure their width,
measure their container's width, switch "modes" between vertical and
horizontal, then set the display property for each of them equally
(block/inline) according to the mode.

The combination of the two is probably the best overall approach.