html - css 自动换行 : break-word won't work

Question

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

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

如果我的预期 View 必须是:

如果用户输入不带空格的字符串，字符串不会中断。并打破设计:

如何正确拆分长单词？？

Answer 1

white-space: nowrap 将阻止 word-break 生效。一些模板应用 white-space: nowrap，这需要用 white-space: normal 覆盖此属性。