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.

score 266 · Accepted Answer · answered Jul 18 '09 at 16:02

266

Try this:

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

answered Jul 18 '09 at 16:02

Alan Haggai Alavi

72,802
19
102
127

1

Am I mistaken or word-wrap is a CSS3 propriety? – Gab Royer Jul 18 '09 at 16:06
13

It's CSS3, but it works in almost all mainstream browsers, including IE5.5 -> 9 - http://caniuse.com/#search=word-wrap – Jon Hadley Jan 27 '11 at 09:10
38

When word-wrap: break-word; doesn't work try word-break: break-all; /*this one is a killer*/ – redochka Aug 27 '11 at 23:09
@redochka 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 ? – pawamoy May 13 '16 at 13:32
9

**Important:** It is `word-break: break-all` and not `word-wrap: break-all`. Easy mistake to make – Simon_Weaver Nov 08 '17 at 09:23
`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. – Ginger and Lavender Sep 20 '18 at 22:48

score 68 · Answer 2 · answered Nov 12 '13 at 08:39

68

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

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

answered Nov 12 '13 at 08:39

lukaserat

4,768
1
25
36

1

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. – coolboyjules Dec 14 '16 at 22:37
6

Nice, I needed `white-space: normal;` too before it worked. – radbyx Feb 07 '17 at 12:15

score 60 · Answer 3 · edited Feb 06 '16 at 17:08

60

You can use a soft hyphen like so:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

This will appear as

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

if it is.

edited Feb 06 '16 at 17:08

Tunaki

132,869
46
340
423

answered Jul 18 '09 at 16:13

Kim Stebel

41,826
12
125
142

19

But how will you know where to put the ``? – Kostas Aug 03 '11 at 11:00
You put it into long words where they may be split. You can even get that information automatically from a suitable dictionary. – Kim Stebel Aug 03 '11 at 11:03
4

But how about gibberish like the one in the example? Is it ok to turn `aaaaaa...aaaaa` into `aaaaaaa...aaaa`? – Kostas Aug 03 '11 at 11:06
20

Exactly what I was looking for. I like that it's too shy to do anything until it has to ;-) – w00t Apr 07 '12 at 09:11
3

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. – dokaspar Aug 29 '12 at 14:12
this is a poor approach in today responsive websites. – Omari Victor Omosa Jul 30 '16 at 20:06
I like this. No need for a stupid css when I am using this in debug text printed by a php script – beppe9000 Dec 17 '16 at 15:48

score 29 · Answer 4 · edited Sep 30 '21 at 07:39

29

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&#8203;aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

edited Sep 30 '21 at 07:39

code

5,690
4
17
39

answered Jul 18 '09 at 16:14

Orr Siloni

1,268
10
21

11

"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 – user102008 Sep 30 '11 at 22:51

score 10 · Answer 5 · answered Jun 02 '16 at 02:04

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;

answered Jun 02 '16 at 02:04

Amol

918
7
20

Loved this approach. covered all bases. thank you! – onmyway Nov 15 '22 at 13:42

score 9 · Answer 6 · edited May 05 '15 at 11:19

9

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.

edited May 05 '15 at 11:19

Radek Postołowicz

4,506
2
30
47

answered Apr 12 '13 at 13:56

Kyle Dearle

129
1
2
9

score 7 · Answer 7 · answered Oct 14 '14 at 15:59

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)

answered Oct 14 '14 at 15:59

Andrew Marais

925
9
13

If you have a `

` element you want to have word wrapping, this works and `word-break` or `word-wrap` don't.

– Pluto Jul 09 '15 at 20:27

score 4 · Answer 8 · edited May 23 '17 at 12:18

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

edited May 23 '17 at 12:18

Community

1
1

answered Apr 20 '15 at 09:21

Timeless

7,338
9
60
94

score 2 · Answer 9 · answered Oct 01 '20 at 20:23

2

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

answered Oct 01 '20 at 20:23

Manoj Alwis

1,337
11
24

score 1 · Answer 10 · edited Oct 01 '20 at 20:37

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;

edited Oct 01 '20 at 20:37

TylerH

20,799
66
75
101

answered May 23 '12 at 09:53

Swapnil Godambe

2,054
1
24
29

2

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. – Spudley May 23 '12 at 21:20

Juraj Guniš · Answer 11 · 2015-02-04T12:56:15.033

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.

edited Feb 04 '15 at 12:56

answered Feb 04 '15 at 10:01

Juraj Guniš

31
3

score 1 · Answer 12 · edited Feb 06 '16 at 17:16

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;

score 1 · Answer 13 · answered Jun 09 '22 at 06:12

1

Try this CSS property -

overflow-wrap: anywhere;

answered Jun 09 '22 at 06:12

Akshay Chavan

185
1
6

score 0 · Answer 14 · answered Nov 27 '14 at 21:10

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.

score 0 · Answer 15 · edited Sep 18 '18 at 02:45

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

edited Sep 18 '18 at 02:45

Stephen Rauch

47,830
31
106
135

answered Sep 18 '18 at 02:24

Rahul Wasnik

142
1
5

Bootstrap has `text-justify` class, so you can use it instead of `.wrap-text` – barbsan Mar 27 '19 at 09:00

score 0 · Answer 16 · answered Dec 27 '19 at 10:22

0

you can use this CSS

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

answered Dec 27 '19 at 10:22

Rashid Iqbal

1,123
13
13

score -1 · Answer 17 · answered Jul 18 '18 at 16:58

-1

Try this

div {display: inline;}

answered Jul 18 '18 at 16:58

Michael Mulikita

147
2
4

score -1 · Answer 18 · edited Jan 29 '20 at 07:11

-1

try:

overflow-wrap: break-word;

edited Jan 29 '20 at 07:11

borchvm

3,533
16
44
45

answered Jan 29 '20 at 03:00

Eden Sharvit

765
11
14

score -1 · Answer 19 · answered Jan 23 '12 at 07:31

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

answered Jan 23 '12 at 07:31

deshbanks

35

4

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... – dokaspar Aug 29 '12 at 15:04

score -3 · Answer 20 · edited Feb 25 '13 at 12:35

-3

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;

edited Feb 25 '13 at 12:35

JSuar

21,056
4
39
83

answered Jan 27 '11 at 08:36

aks

13
1

14

This is identical to the answer above. Why bother? – Anthony Graglia Mar 15 '11 at 10:52

How to word wrap text in HTML?

20 Answers20

Linked

Related