By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Controlling line breaks with CSS

P: n/a
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?

Jan 29 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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:block" 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)
Jan 29 '07 #2

P: n/a
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
Jan 29 '07 #3

P: n/a
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.

Jan 30 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.