我有两个内联跨度.代码示例:
<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; }