CSS3中word-break和word-wrap有什么区别?
大家都知道在CSS3中增加了很多新的属性,其中word-break和word-wrap就是用来给文本换行使用的,但是两者有什么区别很多小伙伴都不是很清楚。今天小千就来告诉你他们究竟有什么不同,应该用在哪里。
word-break
word-break它的属性值一共有3个,其中的几个属性值的含义具体解释如下:
normal:表示默认值,即默认的的换行规则。 break-all:表示强行换行,意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep-all: 也表示换行,但不允许文本中的单词换行,只能在半角空格或连字符处换行。
其中,在这三个属性值中,break-all这个属性值是所有浏览器都支持,但是 keep-all就不这样了,虽然有一定的发展和进步,但目前移动端还不适合使用word-break : keep-all。
word-wrap
它有两个属性值,其中的几个属性值的含义具体解释如下: normal:就是默认值,就是正常的换行规则。 break-word:表示一行单词中实在没有其他靠谱的换行点的时候才进行换行。
其实大家会发现,word-break和word-wrap其实是长得比较像的,而且属性值也有类似之处,其实word-wrap属性也是很有故事的,它之前由于和 word-break长得太像,难免会让人记不住或搞混,所以在CSS3规范里,这个属性的名称被修改了,叫作 overflow-wrap。虽然这个新属性名称改了下,显得语义更准确,但也更容易区别和记忆。另外,在 Chrome和 Safari等WebKit内核的浏览器仅支持这个新属性。因此,虽然换了个好看好用的新名字,但是为了兼容性,目前还是乖乖地使用word-wrap 吧。
下面继续来唠唠这连个属性的到底有啥区别呢?word-break: break-all和 word-wrap: break-word。首先,两者长相神似,都有 word,都有break,位置都还一样,一个有两个break,一个有两个word;其次,两者的功能作用也类似,这两个声明都能使连续英文字符换行,那么它们的区别到底是什么? 下面给大家举个例子说明一下:
综上所述,word-break: break-all;的作用是所有的都换行,很霸道的那种,毫不留情,一点儿空隙都不放过的那种换行,而 word-wrap:break-word则稍微温柔点儿,带有一点怜悯之心,如果这一行文字有可以换行的点,如空格之类的,就不打英文单词或字符的主意了,在这些换行点换行,至于对不对齐、好不好看则不关心,因此,很容易出现一片一片空白区域的情况。
以上就是word-break和word-wrap属性区别的介绍了,同学们在开发过程中根据实际情况去选择即可.
本文来自千锋教育,转载请注明出处。
CSS3中word-break和word-wrap有什么区别?相关推荐
- leetcode word break java,Word Break leetcode java
题目: Given a string s and a dictionary of words dict, determine if s can be segmented into a space-se ...
- LeetCode——Word Break
LeetCode--Word Break Question Given a non-empty string s and a dictionary wordDict containing a list ...
- LeetCode Word Break II
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
- Word Break Word Break II
leetcode上面的两道动态规划题. 题目1 Word Break Given a string s and a dictionary of words dict, determine if s c ...
- Leetcode word break I II 词句拆分I和II的java实现及解析
Leetcode word break I & II 词句拆分I和II的java实现及解析 word break i是leetcode 里面中等难度的题目而word break II 更是ha ...
- 【Leetcode】139. 拆分词句(Word Break)
Leetcode - 139 Word Break (Medium) 题目描述:给定一个字符串 s 与字典 wordDict,判断 s 是否能拆分成 wordDict 中的子字符串. Input: s ...
- [LeetCode] Word Break II 拆分词句之二
[LeetCode] Word Break II 拆分词句之二 Given a string s and a dictionary of words dict, add spaces in s to ...
- 怎么把rmd改成html,在Rmd中的htmlTable - 转换为Word docx
我有以下Rmd文件,它生成一个html文件,然后我将其复制粘贴到docx文件(对于协作者)中.以下是我想知道如何处理表格的问题,但我无法在短片中找到答案here:在Rmd中的htmlTable - 转 ...
- php word转pdf linux,Linux平台中使用PHP把word转pdf的实现方法
Linux平台中使用PHP把word转pdf的实现方法 1.ubantu下安装libreofficesudo apt-get install libreoffice 2.命令行执行word转pdf 将 ...
- C++word break断字(基于单词或字符串)(附完整源码)
C++word break断字的实现 C++word break断字的完整源码(定义,实现,main函数测试) C++word break断字的完整源码(定义,实现,main函数测试) #includ ...
最新文章
- UILabel显示带颜色边的文字
- 【加解密学习笔记:第一天】操作系统基础知识
- linux覆盖文件如何还原_大数据笔试真题集锦---第十九章Linux面试题
- MySQL5.5.27使用Restore From SQL Dump功能导入数据库表中出现Row size too large
- 汇编语言——寻址方式的综合应用及转移指令的原理
- 线性查找与二分查找入门
- 2020-10-18
- 使用光学鼠标传感器实现旋转(或线性)测量(转)
- 深入浅出python学习
- 字符的ASCII码值
- 台式计算机如何联络无线网,台式电脑怎么无线上网
- ORA-01950: 对表空间 USERS无权限
- 网络安全协议与技术练习题
- sizebox模型下载_css盒子模型:内联盒模型、width、height、替换元素、边距、border...
- 防火墙(NGFW)与UTM本质上的区别
- ThreeJs中给立方体设置没有对角线的border
- 关于寒武纪的前世今生与未来
- jupyter不是内部或外部命令,也不是可运行程序的解决方案
- 自定义ViewPager和弹性圆PagerIndicator
- linux系统中shell脚本最全详解二shell条件判断语法介绍函数分析
热门文章
- 本周值得读的15篇AI论文,还有源码搭配服用
- Face++ 论文解读:一种新的行人重识别度量学习方法 | PaperDaily #20
- 动态规划-KMP字符匹配算法
- Greenplum【问题记录 01】资源组配置后GPCC用户无法认证登录
- 2021年Java后端技术知识体系
- spring boot报错Invalid numeric value: Leading zeroes not allowed
- Visual C++——黄维通《 Visual C++面向对象与可视化程序设计》——例题9-3
- Tomcat——设置管理员的用户名和密码
- [HNOI2003]操作系统
- group by 语句优化