| Author |
Controlling line breaks with CSS
|
|
| Chris Nelson 2007-01-30, 9:56 am |
| 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?
| |
| Jim Moe 2007-01-30, 9:56 am |
| 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 <p> with 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)
| |
| boclair 2007-01-30, 9:56 am |
| 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 2007-01-30, 9:56 am |
| On 29 Jan, 19:50, "Chris Nelson" <cnel...@nycap.rr.com> wrote:
> 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.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |