css word-wrap: break-word 不起作用

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

如果我的预期观点必须是：

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

如何正确分解长词？？

原文由 Ramūnas Pabrėža 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Peter Lindsten 发布，翻译遵循 CC BY-SA 4.0 许可协议