asked on

WordWrap/Overflow CSS solution

Hi,

I need a CSS class that can wrap spaceless (if at all the dictionaries permit!) lines nicely, without showing a horizontal scroll bar.

For example a line like this:
jhkjghjkhjhh.jkhksjhgjsdhgkh.gjksdhgjksdhgkh.gjksdhgkjhsdgkjhgdjshgsdhgdshgkhdsghdjshdjhgghjhgghdsgkjsdhgdshgjhgkjsdhgdshghdskjghdskjgh

floats across the screen when "overflow" attrib is not specified. If set to "scroll" the horizontal scroll bar appears. Is there a better solution?

mudbuggle

check out this:
http://www.css3.com/css-word-break/ (browser compatability is listed in the comments)

check out the example below: (I am attempting to find a solution for FF functionality)

<html>
<head>
<style>
div{
	width :100px;
	height : 100px;
	word-break : break-all;
	overflow : auto;
}
</style>
</head> 
<body>
	<div>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
</div>
</body>
</html>

Open in new window

csgp_1412

ASKER

Well, FireFox is the one for which I need expert help :)

mudbuggle

you can also try this.
http://www.quirksmode.org/oddsandends/wbr.html#t02

mudbuggle

after a bit of research it appears the only solution appears to be javascript.

csgp_1412

ASKER

Ok. But how?

mudbuggle