html – css自动换行:break-word无效

前端之家收集整理的这篇文章主要介绍了html – css自动换行:break-word无效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个内联跨度.代码示例:
<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;
}
原文链接:https://www.f2er.com/html/227751.html

猜你在找的HTML相关文章