PDA

View Full Version : Wrap text within a div in Firefox



wishiwasageek
06-09-2005, 12:09 AM
Ok, the usual works fine in IE, but not in FF, so wondering how to text FF to wrap the text.
there are two stylesheets, the first has the CSS for browsetab, the other has the CSS for alpha.

CSS code

.alpha {
color: #e76931;
background:white;
width: 243px;
font-size: 9px;
font-family: verdana, arial, sans-serif;
font-weight:light;
margin:10px 0px 10px 0px;
border: green solid 1px;
white-space: normal;
}

.browsetab {
text-align: left;
background: white;
padding: 0px;
border-left: 0px solid white;
border-top: none;
border-bottom: none;
border-right: none;
margin: 0px;
width:249px;
}



HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK REL="stylesheet" type="text/css" href="browesetab.css" />
<link REL="stylesheet" type="text/css" href="alpha.css" />
</head>
<body class="browsetab">
<div CLASS="alpha">
-A-B-C-D-E-F-G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z
</div>
</body>
</html>

I have tried putting a <P> inside the div.alpha but it doesn't seem to make any difference.
I just want the alphabet to wrap at width 243px.
I've tried white-space: normal
and now I give up.

The reason width is important, is that this HTML is in an IFRAME, absolute width 250px, and so if the size of browsetab is > 250px a horizontal scrollbar appears - yuck.

Let me know if I haven't clarified the issue.

thanx stax and stax

jscheuer1
06-09-2005, 04:30 AM
Why an alphabet? Why dashes? If you use spaces instead of dashes or words separated by spaces, no problem. You could use this:
A - B - C - D - E - F - G - H - I - J - K - L - M - N - O - P - Q - R - S - T - U - V - W - X - Y - Zor even this (notice white spaces and non-breaking spaces):
&nbsp;A &nbsp;B &nbsp;C &nbsp;D &nbsp;E &nbsp;F &nbsp;G &nbsp;H &nbsp;I &nbsp;J &nbsp;K &nbsp;L &nbsp;M &nbsp;N &nbsp;O &nbsp;P &nbsp;Q &nbsp;R &nbsp;S &nbsp;T &nbsp;U &nbsp;V &nbsp;W &nbsp;X &nbsp;Y &nbsp;ZThe problem is that Mozilla will not wrap at a dash, only at a space.

wishiwasageek
06-09-2005, 06:11 AM
Why an alphabet? Why dashes?
Because I want to!!

Thank-you - simple solution!
If the dash was encoded:
&ndash; or &mdash; that should fix the prob as well for firefox?

thanx stax

jscheuer1
06-09-2005, 07:12 AM
Nope, only a space. You could insert a <br> where you want the break to be but, that has other problems in Mozilla.

Added later:

This Works:

<wbr>-<wbr>A<wbr>-<wbr>B<wbr>-<wbr>C<wbr>-<wbr>D<wbr>-<wbr>E<wbr>-<wbr>F<wbr>-<wbr>G<wbr>-<wbr>H<wbr>-<wbr>I<wbr>-<wbr>J<wbr>-<wbr>K<wbr>-<wbr>L<wbr>-<wbr>M<wbr>-<wbr>N<wbr>-<wbr>O<wbr>-<wbr>P<wbr>-<wbr>Q<wbr>-<wbr>R<wbr>-<wbr>S<wbr>-<wbr>T<wbr>-<wbr>U<wbr>-<wbr>V<wbr>-<wbr>W<wbr>-<wbr>X<wbr>-<wbr>Y<wbr>-<wbr>Z

mwinter
06-09-2005, 10:35 AM
Nope, only a space.White space, to be accurate. The HTML specification defines four white space characters[1]: ASCII space (0020), ASCII tab (0009), ASCII form feed (000C), and zero-width space (200B). The latter is the most promising: a character that counts as white space (and therefore allows wrapping), but doesn't impact upon horizontal space requirements.

Unfortunately, NN4 and IE (in general) don't conform properly. NN4 displays question marks. IE4 uses non-breaking spaces (it seems). IE5.x+ uses something wierd: there are no spaces between letters, but the latter half of each line is empty (their font metric code must be screwed up). Opera and Mozilla display perfectly (even relatively early versions).

Mike


[1] The numbers in brackets are the hexadecimal code point values for each characters. You could either convert them into decimal and use &#...;, or leave them in hexadecimal and use &#x...;.

jean
08-30-2005, 11:35 AM
If you remove the font-family, and other font-related information from the style "alpha", the wrapping of text no longer works.

Actually, I have to use the <div class="alpha"> to wrap text that already contains text formatting (from an html editor), which means that I cannot specify font-info in the style "alpha"

Is there any other solution to wrap text in FF ?

jscheuer1
08-30-2005, 01:36 PM
This is not true using the solution given in my last post in this thread.

wishiwasageek
08-31-2005, 07:34 AM
Not sure exactly what you mean Jean.
It's not "div=class alpha" that wraps text, it's the "spaces" between the words, as Mike said, the white space (to be exact).

If you want different font information (specified somewhere else) then leave out the font info in div class="alpha", it should wrap provided you use white space between your text.

(is this what you mean?)

zoffix
10-23-2007, 03:00 PM
CSS3 offers a new property that you can use for your wrapping:
http://www.w3.org/TR/css3-text/#word-wrap
Simply setting { word-wrap: break-word; } will wrap the text if it's too long even if there are no spaces. Currently it's only supported by IE (and maybe some WebKit) so keep on waiting :)

As a side note I'd like to add that IE < 7 has a bug on auto-expanding element with ``width'' set if the text without spaces exceeded the length. { word-wrap: break-word; } solves the bug as well. More on the bug here: http://haslayout.net/css/extrawidth

zaphod42
02-28-2008, 11:12 PM
So this may seem funny, but I'm trying to do exactly the opposite, I've built a javascript library to set sizes and animation for a drop down menu based on the child nodes of a wrapper div around said menu....it works great for drop DOWN;) except that in order to set the menu to expand to the right I need to turn off text wrap. I know that the "noWrap" prop in tables work, but since I use divs almost exclusively I haven't been able to fix this problem...I can omit the spaces and it works fine, but I would prefer to just turn off the wrap in the object builder...

jscheuer1
02-29-2008, 02:39 AM
Try the standard css property/value pair:


white-space:nowrap;

And, for browsers that cannot or will not accept that, wrap your content in nobr tags:


<nobr>Content that you don't want wrapping goes here</nobr>

Also, if you want the overflow of an element to be visible, which it sounds like it might be involved here as well, use the css property/value pair:


overflow:visible;