我有两个内联跨度.代码示例：
<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%;
}
如果用户输入不带空格的字符串,则字符串不会中断.休息设计：
如何正确打破长话？
解决方法
要正确地打破长字,需要组合几个CSS属性,我建议定义和应用这样的辅助类：
.break-long-words {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
hyphens: auto;
}
物业解释：
> overflow-wrap和自动换行是aliases同样的事情,但有些浏览器支持一个而不是另一个,所以我们需要它们.他们
是正确的“正确”方式来打破单词,但它们对动态宽度的元素没有任何影响所以我们需要更多……
> word-break最初用于要求CJK(中文,日文和韩文)文本的特定行为,但其作用类似于
自动换行,但在WebKit中,break-all值会破坏所有内容.出于这个原因,我们必须使用非标准和不良
记录了仅限WebKit的破解字值.
>并且可选地,如果断言的话有意义(即对于URL可能没有),我们可以在浏览器中使用超量
支持他们(目前Firefox,Safari,Edge和IE 10).另请注意,如果你有文字制动,在Firefox中大肆宣传不起作用
属性所以除非你有固定宽度的容器,你必须在FF或传统支持上进行选择.
请注意,我省略了供应商前缀,但如果您不使用Autoprefixer之类的东西,那么这是完整的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;
}
