We help IT Professionals succeed at work.

WordWrap/Overflow CSS solution

csgp_1412
csgp_1412 asked
on
546 Views
Last Modified: 2012-06-22
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?
Comment
Watch Question

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

Author

Commented:
Well, FireFox is the one for which I need expert help :)
after a bit of research it appears the only solution appears to be javascript.

Author

Commented:
Ok. But how?
I am working on some code for you.

Author

Commented:
Oh. Thanks a lot. That'll be great.
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks a lot, we will try this out.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.