css word-wrap：断词不起作用

我有两个内联跨度。代码示例：

    <div class="comment_content">

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

    </div>

和 scss 示例：

.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:

如何正确断掉长单词？

white-space: nowrap会阻止word-break自生效。一些模板适用white-space: nowrap这需要用以下内容覆盖此属性white-space: normal.