[CSS] Forced line break

Question

Good evening,

Do you know how to force a line break in a text inside a div? I have a div with a max-width of 510px, but if I enter a super long word, it overflows the div, and I would like to force a line break in this case. Is it possible to do this in CSS or do I need to use a script?

Thank you in advance :)

Configuration: Windows XP Safari 525.19

GreenDay-punkweapon · Accepted Answer

I found this property (but I can't quite get it to work). Try it and let me know if it works white-space normal: line breaks are automatic (default) nowrap: no automatic line breaks, unless an xHTML tag like
is present. pre: line breaks are made as the text was entered in the source code (like the xHTML tag

sonik21 · Answer

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.

aKuma59 · Answer

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

sonik21 · Answer

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.

aKuma59 · Answer

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

Fygau · Answer

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

eblin · Answer

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

jo3lefou · Answer

put a ... ;)

zenzla · Answer

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.

txiki · Answer

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.

xloadx · Answer

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>

Line 1 Line 2 Line 3

Floriane · Answer

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%;
}

for_help · Answer

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!

milimi · Answer

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, "
",true); } else{ $refac.=' '.$value; } }

GossBow · Answer

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%!

[CSS] Forced line break

15 réponses

Texture issues in enshrouded

Driver his

Peritel to hdmi conversion

How to access the bios on a compaq notebook

Dsi won't turn on anymore

Search for a song with the lyrics

Left mouse click, touchpad click inactive

Codes stronghold crusader

Stuck computer system repair

Disable write protection mp3 player