Break Long Word in a Div When Word-Wrap:Break-Word; Fails

How to force a line break in a long word in a DIV?

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.

---

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

How to break a long word inside a div, based on the div's parent width?

You don't need all those white-space

Instead use

.wordwrap { 
  word-break : break-all;
}

#parent {  width: 500px;  height: 500px;  border: solid 1px;  position: relative;}#child {  top: 20px;  left: 300px;  border: solid 1px;  position: absolute;}.wordwrap {  word-break: break-all;}

<div id="parent">  <div id="child" class="wordwrap">    asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs  </div></div>

css word-wrap doesn't work to fit text into div

You can get rid of all of your flex items and simply do word-break: break-all; like this:

const quotes = [
  {
    text: '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
  },
  {
    text: '222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'
  },
];

const text = document.querySelector('.text');

function randButton() {
  let random = Math.floor(Math.random() * quotes.length);
  text.innerHTML = quotes[random].text;
}

randButton();

.inner-style {
    background: white;
    border-style: solid;
    border-radius: 5px;
    padding: 3px 3px 3px 3px;
    width: 425px;
    word-break: break-all;
}

<div class="style1" >
  <div id="wallet_btc" class="text inner-style"> </div>
</div>
<br/>
<button onclick="randButton()" id="aaa" class="btn btn-primary a55" value="button" type="button" style="font-size:18px">Random</button>

Word-wrap: break-word breaks to wrong div size

You made your image_container floating, but your itemdescription is not ; that means that the itemdescription will follow the "normal" page flow, so when the space to the left is free it will use it.
To achieve what you want (I think), you should put each block floating and assign them sizes, for example :

.image_container {
    padding: 2px 2px;
    height: auto;
    float: left;
    width: 300px;
}

.itemdescription {
    display: block;
    float: left;
    overflow: hidden;
    width: 400px;
    word-wrap: break-word;
}

Don't forget to set a size to parent's div too, to make it work greate ; and read a bit about CSS floats theory

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 tHow to force a line break in a long word in a DIV? How to break a long word inside a div, based on the div's parent width? css word-wrap doesn't work to fit text into deeest test test test</div>

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.

How to prevent long words from breaking my div?

Soft hyphen

You can tell browsers where to split long words by inserting soft hyphen (­):

averyvery­longword

may be rendered as

averyverylongword

or

averyvery-

longword

A nice regular expression can ensure you won't be inserting them unless neccessary:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Browsers and search engines are smart enough to ignore this character when searching text, and Chrome and Firefox (haven't tested others) ignore it when copying text to clipboard.

<wbr> element

Another option is to inject <wbr>, a former IE-ism, which is now in HTML5:

averyvery<wbr>longword

Breaks with no hyphen:

averyvery

longword

You can achieve the same with zero-width space character ​ (or ​).

---

FYI there's also CSS hyphens: auto supported by latest IE, Firefox and Safari (but currently not Chrome):

div.breaking {
  hyphens: auto;
}

However that hyphenation is based on a hyphenation dictionary and it's not guaranteed to break long words. It can make justified text prettier though.

Retro-whining solution

<table> for layout is bad, but display:table on other elements is fine. It will be as quirky (and stretchy) as old-school tables:

div.breaking {
   display: table-cell;
}

---

overflow and white-space: pre-wrap answers below are good too.

---

Related Topics