How to word wrap text in HTML?

Question

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.

Estis

Answer 1

Try this:

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

Edie

Am I mistaken or word-wrap is a CSS3 propriety? – Mame

It's CSS3, but it works in almost all mainstream browsers, including IE5.5 -> 9 - caniuse.com/#search=word-wrap – Mitchellmitchem

When word-wrap: break-word; doesn't work try word-break: break-all; /*this one is a killer*/ – Boley

@Boley But when using word-break: break-all; then in normal text it breaks words in the middle, which is ugly... Can't we have a mix of both behaviors ? – Scaleboard

Important: It is word-break: break-all and not word-wrap: break-all. Easy mistake to make – Inanimate

word-break: break-word gave me the functionality I wanted. It breaks long words to new lines, but also prevents formatting (like container width) from being broken. Using word-break: break-all only does the latter. – Quinquepartite

Answer 2

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

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

Mikkimiko

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

Nice, I needed white-space: normal; too before it worked. – Spathic

Answer 3

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.

Timmi

But how will you know where to put the ­? – Valence

You put it into long words where they may be split. You can even get that information automatically from a suitable dictionary. – Timmi

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? – Valence

Exactly what I was looking for. I like that it's too shy to do anything until it has to ;-) – Babette

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

this is a poor approach in today responsive websites. – Loredo

I like this. No need for a stupid css when I am using this in debug text printed by a php script – Bootjack

Answer 4

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

Democrat

"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 – Europe

Answer 5

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.

Lycopodium

Answer 6

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;

Salpingitis

Loved this approach. covered all bases. thank you! – Lizettelizotte

Answer 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)

Nudism

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

Answer 8

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+ */
}

Amelina

Answer 9

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

Cassis

Answer 10

Try this CSS property -

overflow-wrap: anywhere;

Birr

Answer 11

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;

Moen

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

Answer 12

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.

Slimsy

Answer 13

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;

Peking

Answer 14

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.

Marcos

Answer 15

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

Rangy

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

Answer 16

you can use this CSS

p {
  width: min-content;
  min-width: 100%;
}

Footstool

Answer 17

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.

Demonstrative

Answer 18

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.

Interlocutory

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

Answer 19

Try this

div {display: inline;}

Trachoma

Answer 20

try:

overflow-wrap: break-word;

Jueta

Answer 21

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;

Tarango

This is identical to the answer above. Why bother? – Settera