css word-wrap: break-word won't work

Question

I have two inline span. code sample:

    <div class="comment_content">

        <span class="comment_author"><?= $child_comment['comment_author'] ?></span>
        <span class="comment_text"><?= $child_comment['comment_content'] ?></span>

    </div>

And scss sample:

.comment_content {        
    word-wrap: break-word;
}
.comment_author {
    display: inline-block;
    vertical-align:top;
}
.comment_text {            
    display: inline-block;
    word-wrap: break-word;
    width: 100%;
}

If my expected view has to be:

If user enters string without spaces, string won't break. And breaks design:

How properly break long words ??

Answer 1

white-space: nowrap will prevent word-break from taking effect. Some templates apply white-space: nowrap which necessitates overriding this attribute with white-space: normal.

Answer 2

To properly break long-words it requires to combine several CSS properties, I would suggest defining and applying helper class like this:

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

Properties explained:

• overflow-wrap and word-wrap are aliases for same thing but some browsers support one and not the other so we need them both. They are offical "correct" way to break words but they don't have any effect on elements with dynamic width so we need more...
• word-break is originally intended for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text but works similar to word-wrap but in WebKit break-all value breaks everything and everywhere. For that reason we must use non-standard and poorly documented WebKit-only break-word value.
• and optionally, if it makes sense for break words to have hypens (ie. for URLs it probably doesn't) we can use hypens in browsers that support them (at the moment Firefox, Safari, Edge and IE 10+). Also note that in Firefox hypens don't work if you have word-brake property so unless you have fixed-width container you must choose between hypens on FF or legacy support.

Note that I omitted vendor prefixes but if you don't use something like Autoprefixer than this is full verison:

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}