[CSS] Forced line break

I am looking to make an automatic line break in a div
as explained by the author of this post.

The parameter "word-wrap:break-word;" is suitable for Internet Explorer 8.0 but not for version 3.0.14 of Firefox.
Is there code that can be compatible with both browsers to create an automatic line break?

Thank you for your help.
Fabien

There is a way to handle line breaks with WHITE-SPACE:

white-space: pre;

or

white-space: pre-line;

or

white-space: pre-wrap;

It really depends on the content of your base container translated in CSS by this kind of expression for a class [class] (.) or an object [id] (#):

div.objet{ white-space: pre-line; }

or

div#objet{ white-space: pre-line; }

If you're not very familiar with handling tag arguments for CSS, here's a small example:

<div class=' objet' id=' objet'>
Line 1
Line 2
Line 3
</div>

I'm sorry, but I can only provide translations from French to English or from English to French. Please provide the text you would like to have translated.

Hello everyone,
The return will only happen if there is a blank, let me explain:
- If the word is long (they are not that many in the French language, anticonstitutionnellement is the longest to my knowledge), it fits in the div or it doesn't. In this case, the size of the div is too small for the number of characters. If anticonstitutionnellement doesn’t fit in your div, it means you’ve chosen a font that’s too large, a font size that’s too big. So you either reduce your font size or increase the width of your div.
- If this long word is preceded by other words, it should normally display below the others (those that precede it).
Line breaks in a div are automatic. If this is not the case, it’s that your word is too long compared to the width of the div.
I don’t know if I’m making myself clear....
But 510px is already quite large for a word, even long, to fit in.
Or are you talking about uneven blanks on the right side of the div? Because the text is left-aligned.
If you choose text justification, the blanks on the right will all be equal but the spaces between the characters will be modified (and it will look very ugly on display).

Happiness is the only thing we can give without having it.

Wow guys, you're not managing this well!
So here is the solution

in your CSS you set a fixed width and the height to auto, for example CSS file:

#mysuperdiv{ width: 300px; height: auto; }

IT WORKS 100%!

I found this code on another site, in case it can help someone else.

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width: 99%;
}

Hello everyone,

is there a solution to this problem?

Because word-wrap: break-word; doesn't work in Firefox 3.5.9...

I've been searching the forums, but all I see are people asking the question without any solutions...

Thanks in advance

To the next person reading this topic, " word-wrap: break-word; " does not work on table td elements. Just put a div (with a max-width) underneath.

There you go!

Late response but if this can help, a somewhat barbaric solution that may take a while depending on the length of the text:

 //passing the text into an array $list= explode(" ", $text); $charLimit=70; $refac=null; foreach ($list as $key => $value) { //check the size of each word if greater than the defined size if(strlen($value)>$charLimit) { //Cut it into several words of defined length and add line breaks between. $refac.=wordwrap($value, $charLimit, "<br/>",true); } else{ $refac.=' '.$value; } } 

Uhh no, it doesn't work...
What I want is for the word to be cut off at the edge of my div when it's too large to fit, and for the rest to be displayed on the line below.
I don't know if that's clear enough... :x

The problem is not the text itself; my words return to the next line automatically.

The issue is that if the user enters a word that is too long, it will overflow...

Well, I have this code, and it creates a line break when the text is too large:

 body { width: 760px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-color: #000000; } #mid { margin-bottom: 20px; padding: 5px; color: #990000; background-color: #000000; width: 760px; height: auto; background-image: url("image2/back.png"); background-repeat: no-repeat; border: 0px solid white; }

--
JuZa.e3b.org || No man's land, People are strange, & Jesus was a punk
All information must be free to circulate. Nothing should be hidden. We have the right to know.

put a
... ;)

If you make an inner margin with padding, it should work, right?

 padding: 5px; 

--
JuZa.e3b.org || No man's land, People are strange, & Jesus was a punk
All information should be free to circulate. Nothing should be hidden. We have the right to know.