Reputation: 5214

How to word wrap text in HTML?

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.

Upvotes: 213

Answers (21)

Akshay Vijay Jain

Reputation: 16025

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.

Upvotes: 0

Akshay Chavan

Reputation: 291

Try this CSS property -

overflow-wrap: anywhere;

Upvotes: 3

Orr Siloni

Reputation: 1308

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

Upvotes: 30

Swapnil Godambe

Reputation: 2044

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;

Upvotes: 1

Manoj Alwis

Reputation: 1426

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

Upvotes: 2

Eden Sharvit

Reputation: 864

try:

overflow-wrap: break-word;

Upvotes: -1

Rashid Iqbal

Reputation: 1271

you can use this CSS

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

Upvotes: 0

Rahul Wasnik

Reputation: 152

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

Upvotes: 0

Michael Mulikita

Reputation: 11

Try this

div {display: inline;}

Upvotes: -1

Amol

Reputation: 918

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;

Upvotes: 10

Wesson2

Reputation: 11

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;

Upvotes: 1

Kim Stebel

Reputation: 42045

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.

Upvotes: 61

Kyle Dearle

Reputation: 139

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.

Upvotes: 10

Timeless

Reputation: 7547

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

Upvotes: 4

Juraj Guniš

Reputation: 31

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.

Upvotes: 1

Vladimir Salguero

Reputation: 5947

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.

Upvotes: 0

Andrew Marais

Reputation: 965

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)

Upvotes: 7

lukaserat

Reputation: 4896

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

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

Upvotes: 70

aks

Reputation: 11

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;

Upvotes: -4

deshbanks

Reputation: 35

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.

Upvotes: -1

Alan Haggai Alavi

Reputation: 74292

Try this:

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

Upvotes: 272

How to word wrap text in HTML?

Answers (21)

Related Questions