white-space: nowrap

[audiopro]

I have a page which contains a paragraph of links to our products at the bottom of a form.
This is the format but there are a couple of hundred items.

<div class="lynx">
<a href='[URL unfurl="true"]http://www.somesite.co.uk?script.cgi?item=tiny[/URL] black box'>tiny black box</a>
<a href='[URL unfurl="true"]http://www.somesite.co.uk?script.cgi?item=small[/URL] black box'>small black box</a>
<a href='[URL unfurl="true"]http://www.somesite.co.uk?script.cgi?item=medium[/URL] black box'>medium black box</a>
<a href='[URL unfurl="true"]http://www.somesite.co.uk?script.cgi?item=large[/URL] black box'>large black box</a>
</div>

The I want to prevent the descriptions ie. 'small black box'
from wrapping at the end of a line so keeping descriptions together.
I have tried

white-space: nowrap

but this works too well and puts the entire paragraph in a single line making the page very wide.
How can I force it to wrap at the end of the last full decription on each line?

Keith

http://www.studiosoft.co.uk

 

[Vragabond]

Which item did you apply the white space to? I suppose it should work if you apply it to the anchor element rather than the div. Something like:

.lynx a {
  white-space: nowrap
]

 

[audiopro]

I tried a few options
.lynx
.lynx a
even .lynx a:hover
but the results varied between nothing happening (expected) and all the text appearing on one line. One way I thought of doing it was to enclose each one in an inline DIV but over 200 DIV's, too many I think. The code is created dynamically so there is not much actual coding to be done as the products are read from a database.
This wrapping just spoils the appearance of the page so I need to sort it.


Keith

http://www.studiosoft.co.uk

 

[Vragabond]

Putting my CSS on a page containing your code gives me expected results (not breaking a line in the link but breaking a line between links) in IE6, IE7 and Mozilla. You can see it here.

 

[audiopro]

Thanks Vragabond,
Your example got me thinking, I moved the white-space command higher in the style sheet definition and now it works as expected. Is there a definitive order in which commands must be issued?

Keith

http://www.studiosoft.co.uk

 

[Vragabond]

No, except for certain shorthand styles will cancel individual styles higher in the code. Something akin to:

.myElement {
  background-color: red;
  background: url(myImage.gif) top left repeat-y;
}

If the image is not found in this particular code, background color of the element will not be red, because background cancelled it out.

But it never is that a property defined higher will take precedence over a property defined lower. That of course goes for properties within one declaration. If we're talking multiple declarations throughout the stylesheet, it all comes down to [google]CSS specificity rules[/google]. By default, the rule is that whatever comes later in the code will take precedence over the former, except for items addressed before that have higher specificity. For explanation on specificity see the link above.

If I would have to guess why your style did not work when it was lower in the declaration, I would say that you have an error in the declaration (forgot a semi-colon at the end of a line somewhere or similar) and that's why the property expressed lower (below the error) was not being accepted.

 

[audiopro]

I think there is a good chance, I will never know the reason why it didn't work. I haven't corrected any errors but I can place the no-wrap anywhere in the declaration and it works fine now. Another mystery?

Keith

http://www.studiosoft.co.uk