css自动换行: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%;
}

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

如果用户输入不带空格的字符串,则字符串不会中断.打破设计:

如何正确打破长话？

Answer 1

我遇到了同样的问题，这里没有解决问题的答案。

结果是我使用的模板（角材料）应用了white-space: nowrap。使用white-space: normalmadeword-break: break-all或word-break: break-wordwork删除或覆盖它。

也许这会帮助其他人搜索相同的问题。

Answer 2

要正确打破长字,需要组合几个CSS属性,我建议定义和应用这样的辅助类:

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

物业解释:

• overflow-wrap和自动换行是同名的别名,但是有些浏览器支持一个而不支持另一个,所以我们都需要它们.它们是打破单词的正确"正确"方式,但它们对动态宽度的元素没有任何影响所以我们需要更多...
• 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;
}

Answer 3

使用word-break样式定义单词中中断到下一行的位置。默认情况下，它使用空格或连字符，但您可以将其设置break-all为允许中断任何字母：

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