CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorerfirefox
Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

How to mimic word-break: break-word; for IE9, IE11 and Firefox

How to mimic word-break: break-word; for IE9, IE11 and Firefox?

It seems to work in Chrome. I have learnt and understood that it is a is non-standard, webkit only.

FYI, I have tried using, 

white-space: pre-wrap;

And some more like,

   overflow-wrap: break-word;

Also tried the below mentioned CSS,

 word-wrap:  break-word;
 word-break: break-word;

But these don't seem to work.

I can't provide fixed width to the span(which contains the text) by making it display: block; explicitly as the text is dynamic and will differ according to the user's Geo-location. Currently we support around 18 languages.

This is how the code looks,

The html,

<div id="grid2">
     <span id="theSpan">Product Support</span>
</div>

The CSS,

#theSpan{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera 7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   word-break: break-all;
}

#grid2{
   width: 100px;
}

It looks like this,

enter image description here

I want it to be like,

enter image description here

Please note:
I had to use word-break: break-all; as for Some of the languages the translated text is too long and it overflows out of the grid. The text 'Product Support' is dynamic.

Update:
I have a fixed width for the div with id, grid2. In one of the languages the translated text is too long, it's a Single word and it flows out of the grid2 div.

Updated the code too.

Upvotes: 24

Views: 33967

Answers (3)

Pavel Kolmogorov
Pavel Kolmogorov

Reputation: 31

#grid2{
    white-space: pre-wrap;
    word-wrap: break-word;
}

This should work for IE11, but not for IE9

Upvotes: 1

Darren Reimer
Darren Reimer

Reputation: 761

I have had good success in Chrome, Firefox and IE with using only:

word-break: break-word;
word-wrap: break-word;

In my problem case I was already using:

display: table-cell;

and I ended up having to include

max-width: 440px;

to get wrapping in all browsers. In most cases the max-width was not necessary.

Upvotes: 27

Nitesh
Nitesh

Reputation: 15759

Use display:table-caption to achieve what you are looking for.

LIVE DEMO

The HTML:

<div id="grid2">
     <span id="theSpan">Product Support</span>
</div>

The CSS:

#theSpan{
  display:table-caption;
}

Hope this helps.

Upvotes: 0

Related Questions