213

How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa which exceeds the width of a div (say 200px) be wrapped?

I am open to any kind of solution such as CSS, jQuery, etc.

Improve this question

21 Answers 21

Reset to default
272

Try this:

div {
    width: 200px;
    word-wrap: break-word;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Am I mistaken or word-wrap is a CSS3 propriety?
It's CSS3, but it works in almost all mainstream browsers, including IE5.5 -> 9 - caniuse.com/#search=word-wrap
When word-wrap: break-word; doesn't work try word-break: break-all; /*this one is a killer*/
Important: It is word-break: break-all and not word-wrap: break-all. Easy mistake to make
"Warning: The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias." developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
|
71

On bootstrap 3, make sure the white-space is not set as 'nowrap'.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}
Improve this answer

2 Comments

Great. I tried using word-break: break-all on a Twitter Bootstrap 3 panel body but it never worked. Adding white-space:normal was the fix.
Nice, I needed white-space: normal; too before it worked.
61

You can use a soft hyphen like so:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

This will appear as

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

if the containing box isn't big enough, or as

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

if it is.

Improve this answer

7 Comments

But how will you know where to put the ­?
You put it into long words where they may be split. You can even get that information automatically from a suitable dictionary.
But how about gibberish like the one in the example? Is it ok to turn aaaaaa...aaaaa into a­a­a­a­a­a­a...a­a­a­a?
Exactly what I was looking for. I like that it's too shy to do anything until it has to ;-)
this works fine if the word to be wrapped is an overly.long.java.package.name or some similar string with many dots. then you can add the ­ after each dot.
|
30 
div {
    /* Set a width for element */
    word-wrap: break-word
}

The 'word-wrap' solution only works in IE and browsers supporting CSS3.

The best cross browser solution is to use your server side language (php or whatever) to locate long strings and place inside them in regular intervals the html entity ​ This entity breaks the long words nicely, and works on all browsers.

e.g.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Improve this answer

1 Comment

"place inside them in regular intervals the html entity #8203" but then when you try to copy the text and paste it somewhere, you'll have a random Unicode character in the middle
10

The only one that works across IE, Firefox, chrome, safari and opera if there are no spaces in the word (such as a long URL) is:

div{
    width: 200px;  
    word-break: break-all;
}

I found this to be bullet-proof.

Improve this answer

Comments

10

This worked for me

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
Improve this answer

Comments

7

Another option is also using:

div
{
   white-space: pre-line;
}

This will set all your div elements in all browsers that support CSS1 (which is pretty much all common browsers as far back as IE 8)

Improve this answer

1 Comment

If you have a <pre> element you want to have word wrapping, this works and word-break or word-wrap don't.
4

Cross Browser

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* 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+ */
}
Improve this answer

Comments

3

Try this CSS property -

overflow-wrap: anywhere;
Improve this answer

Comments

2 
<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>
Improve this answer

Comments

1

Example from CSS Tricks:

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

More examples here.

Improve this answer

Comments

1

In HTML body try:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

In CSS body try:

background-size: auto;

table-layout: fixed;
Improve this answer

Comments

1

Add this CSS to the paragraph.

width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; 
padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left;
Improve this answer

1 Comment

I like text-overflow:ellipsis as much as the next guy, but it is not a correct answer to this question. He's looking to word wrap, not truncate the overflow.
0

Try this

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

the property text-overflow: ellipsis add ... and line-clamp show the number of lines.

Improve this answer

Comments

0

I have used bootstrap. My html code looks like ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}
Improve this answer

1 Comment

Bootstrap has text-justify class, so you can use it instead of .wrap-text
0

you can use this CSS

p {
  width: min-content;
  min-width: 100%;
}
Improve this answer

Comments

0

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box

overflow-wrap: anywhere | break-word

check details in the demo in above link.

Improve this answer

Comments

-1

A server side solution that works for me is: $message = wordwrap($message, 50, "<br>", true); where $message is a string variable containing the word/chars to be broken up. 50 is the max length of any given segment, and "<br>" is the text you want to be inserted every (50) chars.

Improve this answer

1 Comment

This solution will not work if 50 times the character width is more than the required maximum of 200px. Just use your browser's zooming function and you'll eventually see it break...
-1

Try this 

div {display: inline;}
Improve this answer

Comments

-1

try:

overflow-wrap: break-word;
Improve this answer

Comments

-4

Use word-wrap:break-word attribute along with required width. Mainly, put the width in pixels, not in percentages.

width: 200px;
word-wrap: break-word;
Improve this answer

1 Comment

This is identical to the answer above. Why bother?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.