css属性white-space、word-wrap和word-break

有时会用到文本换行,但新增了css3的属性,导致傻傻分不清楚,总结下white-space、word-wrap和word-break使用

white-space

如何处理文本中的空白符(比如空格和换行符)。

常用:normal | nowrap

  • normal 默认。空白会被浏览器忽略。
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止。

常用场景:单行文本溢出使用省略号代替

.css{
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

关于多行文本溢出使用省略号代替,则利用-webkit-line-clamp:

.css{
    overflow: hidden; 
    text-overflow: ellipsis;
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    /*英文强制换行*/
    word-wrap:break-word;
    word-break:break-all;
}

总结:white-space用来设置CJK(中文、日文、韩文)文本是否不折行,实际中大多是要用white-space:nowrap来让文本不折行。

word-wrap

css3属性,允许长单词或 URL 地址换行到下一行。

常用:normal | break-word

  • normal 只在允许的断字点换行(浏览器保持默认处理)。
  • break-word 在长单词或 URL 地址内部进行换行。

总结:word-wrap用来设置非CJK文本是否折行(因为CJK文本会自动折行),如果空间足够,不会对单词内部进行截断

word-break

css3属性,规定自动换行的处理方法。

常用:normal | break-all | keep-all

  • normal 使用浏览器默认的换行规则。
  • break-all 允许在单词内换行。
  • keep-all 只能在半角空格或连字符处换行。

总结:word-break用来设置非CJK文本是否折行,可以使用break-all对单词内部进行折行

PS:如果用了white-space为nowrap,设置其他的强制折行(word-break)是不起作用的,要将white-space设置为normal



Mjiong君

爱生活,爱技术,爱分享

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注