"nowrap" support across browsers

[djr33]

This came up after (mostly?) solving the problem discussed here:
http://www.dynamicdrive.com/forums/showthread.php?71800-Exact-graphical-equivalence-between-browsers-%28especially-with-fonts%29


I need to display text based on preset line breaks, without any further wrapping from the HTML. However, I also need to place that within a div (or table cell) of a limited width. Therefore, I need to disable text-wrapping in the browser for this paragraph.


I've found this code:
white-space:nowrap;
and I can apply it to my <p> tag.

Is that reliable? Is there anything extra I could/should do, perhaps for older browsers?



Secondly, let me add one confusing extra aspect to this:
I'd like to actually put this in a <div> with overflow:hidden;. Is there any way to unhide just this content?
I can't put it outside of the div because I need its position to still be determined by the content around it. But I'd like the text to potentially extent beyond the edge of the div, while other things in the div (perhaps an image) would actually be cut off on the edge.

In short, can part of a div be an exception to overflow:hidden;?

[coothead]

Hi there djr33,

according to this site...

http://www.quirksmode.org/css/whitespace.html
..."white-space:nowrap" appears to be 100% reliable. ;)

Unfortunately, I cannot help with your second problem, as I don't
understand what it is. :eek:

Of course that may just be due to a prolonged "Senior Moment",
which can kill my reasoning powers stone dead. :D

coothead

[keyboard]

I'm pretty sure you can't apply overflow hidden to part of a div.
You could probably make a few divs inside a div and only use it on one of them?
Or maybe a javascript solution...

Just to clarify, you want some content to stop when it hits the edge, and some to keep going?

[djr33]

Coothead, thanks! And what I'm doing is confusing for me too. I'm trying to make PDF and HTML layouts identical (or as close to identical as possible). The other threads have a lot more information but I don't expect you to read them all.


So: 1) Great. I'll rely on that then and that solves part of my problem

As for (2):

Just to clarify, you want some content to stop when it hits the edge, and some to keep going? Right, that's exactly it.

Here's my real-world motivation for this: I want to allow the PDF's processing to set the line breaks in the text (which I can do by asking the PDF script to insert <br>s as needed, basically). But then I want to show the other things (let's say an image) as actually being cut off at the edge of the page as they could be in the PDF.

So: I want overflow:hidden except for text, which should be allowed to go off the edge.

Important note: the text won't go off by much; this is going to vary only by cross-browser/OS variation in font rendering. In other words, it'll be half of a letter or less most of the time!



----
One possible but very awkward solution:
--create two copies of the same content on top of itself
--make everything but the text invisible in one layer without overflow:hidden
--make only the text invisible in one layer with overflow:hidden
--that would hold the layout in place.

But... I'd like a better solution than that.

[djr33]

Alright, here's an idea:

--Set the z-index of all <p> elements to 3.
--Create a solid color (white) border around the area, using divs with z-index 2.
--Set the z-index of everything else inside the div to 1.

(Obviously 1, 2 and 3 are examples; they could be changed as needed.)

That's still a little messy, but I think it should work.


Does anyone have a good link to information about z-index? Does z-index ever affect horizontal/vertical positioning? Are there restrictions on when it can be used?

[bernie1227]

As far as I know, z-index only effects the position of the layer comparative to the other layers. The only thing I can think of in terms of it not working, is that it doesn't work in an element which is not positioned absolutely or relatively.
http://www.echoecho.com/csslayers.htm
(It's mentioned in layer basics)

[djr33]

Hm. I do need this to be inline so that it is positioned within the layout such as after another paragraph or before an image, etc.

[bernie1227]

Actually this link:
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Is much more comprehensive in explaining the z-index and problems that may come with it. As far as positioning goes, you do not have to specifically position indeed, you do not have to use the top bottom, left and right css property's to even move it. All you have to do is set a position and it should work.

[djr33]

Thanks, Bernie. I'll look into it. Sounds like there may be some options :)

[djr33]

Alright, I've put all that together and it appears to work:
http://jsfiddle.net/mWzU7/10/

This is just for demo purposes. One line of text is below the artificial boarder created by a div and the other line of text is above it. One is allowed to run beyond the border and the other isn't.

Works just like I wanted :)

Still quite a bit to put together to get the whole project working, but I'm collecting more pieces!