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

  • 时间:2018-07-21 23:34 作者:WP知乎君 来源:WP知乎君 阅读:269
  • 扫一扫,手机访问
摘要:有时会使用到文本换行,但新添加了css3的属性,导致傻傻分不清楚,总结下white-space、word-wrap和word-break用white-space如何解决文本中的空白符(比方空格和换行符)。常使用:normal | nowrapnormal 默认。空白会被浏览器忽略。nowrap 文本

有时会使用到文本换行,但新添加了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:

overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;

总结: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

参考:网上资料

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】百度网盘如何加入群组(2021-03-01 21:29)
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上,小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员,需要学习什么?(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展 (纯干货)(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)
血鸟云
手机二维码手机访问领取大礼包
返回顶部