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

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;
}

Answer 2

Use the word-break style to define where in the word to break to the next line. By default, it uses spaces or hyphens but you can set it to break-all to allow breaking on any letter:

.comment_text {
    display: inline-block;
    word-wrap: break-word;
    word-break: break-all;
    width: 100%;
}

Answer 3

I ran into the same problem, with none of the answers here fixing the problem.

Turns out the template (angular material) I was using applied white-space: nowrap . Removing or overriding this with white-space: normal made word-break: break-all or word-break: break-word work.

Perhaps this will help someone else searching for the same issue.

Answer 4

I thing it will be helpful. You have to specify width , particular in your case.

 .comment_content{ width:500px; border:1px solid #ccc; } .comment_author{ width: 100px; float: left; } .comment_text{ width: 400px; word-wrap: break-word; display:inline-block; } 

 <div class="comment_content"> <span class="comment_author">Hello</span> <span class="comment_text">qeqweqweqweqeeqeqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqeqweqweqweqweqweqweqwewqeqweqweqweqweqweqweqweqweqweqeqeqweqweqweqweqweqweqweqweqweqeqewqweqeq</span> </div> 

Here is a working examples to achieve what you want: examples

Answer 5

You can use

word-break: break-all;

See fiddle here

fiddle

Answer 6

Please use word-break: break-all; in .comment_content class.