Smarter Word Break in CSS

Smarter word break in CSS?

Try word-break: break-word; it should behave as you expect.

Is there any way to make the CSS break-all word breaking property smarter?

It seems you want the behavior of

word-break: break-word;

It is a non-standard property supported by Chrome which behaves almost like word-wrap: break-word. However, when they tried to remove it, they noticed

In some cases (tables and display: table; layouts) the
word-break: break-word behavior is different from
word-wrap: break-word; and the former works as expected.

The CSS WG resolved to

Add word-break: break-word to spec if Edge/Firefox find it critical
enough to Web compat to implement it.

So it may become standard.

---

But currently, if you want to prevent table cells from being at least as wide as the longest word, and still avoid breaking inside words when it's not necessary, you can use

table-layout: fixed;

Note this will get rid of some special table behaviors, e.g. all columns will be equally wide even if their contents could fit better in other arrangements.

HTML and CSS smart auto line-break?

You can use <wbr> tag to break the link in a specific location.

When a word is too long, or you are afraid that the browser will break
your lines at the wrong place, you can use the element to add
word break opportunities.

You should add it in the place you want your text will break:

<a href="https://www.soundcloud.com/thelastminutemusic"><p>www.soundcloud.com/<wbr>thelastminutemusic</p></a>

How to get smart word breaks in html content editable DIV

What you're referring to is 'word wrapping', where the word is 'wrapped' to the next line. This is done automatically so if you're div is not doing this then you may have a problem somewhere else. The reason this happens is because a div would word wrap normally even if it were not contenteditable so it does this by default. One way it could be disabled from wordwrapping is if you have white-space: nowrap in your CSS (more info at How to turn off word wrapping in HTML?), but this seems unlikely.

What is the difference between word-break: break-all versus word-wrap: break-word in CSS

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.

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.

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 tSmarter word break in CSS? Is there any way to make the CSS break-all word breaking property smarter? HTML and CSS smart auto line-break? How to get smart word breaks ieeest test test test</div>

---

Related Topics