Word-Wrap Break-Word Does Not Work in This Example

word-wrap break-word does not work in this example

Mozilla Firefox solution

Add:

display: inline-block;

to the style of your td.

Webkit based browsers (Google Chrome, Safari, ...) solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

Note:
Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.

Opera solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

The previous paragraph applies to Opera in a similar way.

Why doesn't word-wrap work properly in CSS3?

Use word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
word-break: break-all;
    border:2px solid; }

LIVE DEMO

word-wrap: break word; fix or alternative

As @Sfili_81 mentionned it

something like word-break: break-all;

Here you go

var txt = document.getElementById("demo").innerHTML;

var dataArr = txt.split(' ');

var paragraph = document.getElementById("demo");
var finalString = "";
for (var i = 0; i < dataArr.length; i++){
    if (dataArr[i].length > 6 ) {
      finalString = finalString + " <span>"+ dataArr[i]+"</span>"; 
  }
  else{
    finalString = finalString + " " + dataArr[i];
  }
}

paragraph.innerHTML = finalString;

div{
  width:50px;
  background: red;
 
}
span{
  word-break:break-all;
}

<div id="demo">test tword-wrap break-word does not work in this example Why doesn't word-wrap work properly in CSS3? word-wrap: break word; fix or alternative CSS Word wrap is not working oeeest test test test</div>

CSS Word wrap is not working on <a> tag

As Vitorino fernandes told in comment, added display:block in .GreenBtn.
It works as expected.

.GreenBtn {
        background-color: #6aae12;
        border: 1px solid #539102 !important;
        display:block
        color: #FFFFFF !important;
        cursor: pointer !important;
    }

CSS word-wrap: break-word not wrapping a tag unless you wrap it in div and add rule there

The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:

a {
  display:inline-block;
  word-wrap: break-word;
}

a {  width:100px;  word-wrap: break-word;  display:inline-block;}

<div>  <a href="...">verylongurlherewithnospaces</a></div>

Word-wrap not working in Internet Explorer

you need to have

table {
    width:100%;
    table-layout:fixed;
}

and put word-wrap in table,td,th not into span

http://jsfiddle.net/d6VsD/7/

word-wrap:break-word not working in IE8

If I recall correctly, word-wrap: break-word; is indeed supported in Internet Explorer 8, but the styled element must have layout.

---

Related Topics