CSS column-count in list inside fieldset doesn't break-word

Question

column-list works fine fieldset, just not the word-wrap.

<fieldset>
    <ul>
        <li><a href="#">foo</a> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>bbbbbb</li>
        <li>ccccccc</li>
        <li>aaaaaaaa</li>
        <li><a href="#">foo</a>aaaaaaaa</li>
        <li>aaaaaaaa</li>
        <li>aaaaaaaa</li>
    </ul>
</fieldset>

ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

ul li{
 word-wrap: break-word;
}

Test: http://jsfiddle.net/jbe07sbs/1/

Tested in Chrome 39.0.2171.71 m

Related: column-count on fieldset doesn't work for firefox

Answer 1

demo - http://jsfiddle.net/jbe07sbs/2/

ul li {
  word-wrap: break-word;
  word-break: break-all; /** adding this will fix **/
}

Word-break: break-all

irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)