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

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

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 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:

Code:

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

or even this (notice white spaces and non-breaking spaces):

Code:

 &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;Z

The 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:
– or — 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 where you want the break to be but, that has other problems in Mozilla.

Added later:

This Works:

-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

**mwinter** · 06-09-2005, 10:35 AM

Originally Posted by jscheuer1

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-29-2008, 12:12 AM

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...

Thread: Wrap text within a div in Firefox

Thread Tools

Search Thread

Wrap text within a div in Firefox

Is the font-family required?

Solution for IE and the future

oh yeah?

Bookmarks

Bookmarks

Posting Permissions