提升网站收录,玉林网站开发,酒店网站设计公司,网站迁移 域名设置前言
正常情况下#xff0c;在固定宽度的盒子中的中文会自动换行。但是#xff0c;当遇到非常长的英文单词或者很长的 URL 时#xff0c;文本可能就不会自动换行#xff0c;而会溢出所在容器。幸运的是#xff0c;CSS 为我们提供了一些和文本换行相关的属性#xff1b;今…
前言
正常情况下在固定宽度的盒子中的中文会自动换行。但是当遇到非常长的英文单词或者很长的 URL 时文本可能就不会自动换行而会溢出所在容器。幸运的是CSS 为我们提供了一些和文本换行相关的属性今天来研究一下 CSS 中的文本换行。 overflow-wrap word-break white-space line-break hyphens
本篇文章重点讲述前两种方式 overflow-wrap 和 word-break
1. overflow-wrap
overflow-wrap 用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时为防止其溢出浏览器是否允许这样的单词中断换行。其属性值有以下三种
overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;1normal
属性值为 normal 将使浏览器使用系统的默认换行行为。因此对于英语和其他相关书写系统换行符将出现在空格和连字符处。 从图中可以看出段落中有一个很长的单词溢出了容器这是系统的默认换行行为。
2anywhere
使用值 anywhere 将在字符串之间的任意点来进行中断仅当在其行上显示单词会导致溢出时浏览器才会中断该单词。如果单词放在其行上时仍然溢出它将在发生溢出的点处中断该单词。 可以看到使用 overflow-wrap:anywhere 将溢出的单词分解成文本块这样就可以将其放入容器中。这里文本所在的容器宽度是固定的。
该属性会影响其所在元素的 min-content 属性大小计算。当width设置为min-content时很容易看出来
.break-word {width: min-content;overflow-wrap: break-word;
}.anywhere {width: min-content;overflow-wrap: anywhere;
}效果如下 可以看到带有overflow-wrap:break-word 的元素计算出的 min-content 就像单词没有被破坏一样因此它的宽度变成了最长单词的宽度。而带有 overflow-wrap:anywhere 的元素由于在任何地方都可能发生中断因此 min-content 最终成为单个字符的宽度。
注意这种行为只有为文本所在容器的宽度设置为min-content时才会发挥作用如果宽度设置为固定的值那么anywhere 和 break-word 的表现是一致的。
另外需要注意目前有些浏览器不支持该属性 3break-word
break-word 属性表示如果行内没有多余的地方容纳该单词到结尾则那些正常的不能被分割的单词会被强制分割换行。 可以看到文本在长单词的某个地方自动换行了。如果文本所在容器设置了固定的宽度就会在长单词溢出的地方换行。
4浏览器兼容性
overflow-wrap 属性就是原来的word-wrap。word-wrap最初是一个没有前缀的 Microsoft 扩展。它不是 CSS 标准的一部分尽管大多数浏览器都使用 word-wrap 这个名称来实现它。根据 CSS3 规范草案浏览器应将word-wrap视为overflow-wrap属性的遗留名称别名以确保兼容性。 2. word-break
word-break 属性用于指定怎样在单词内进行断行。我们可以使用该属性在内容发生溢出的确切位置拆分单词并将其换行到下一行。下面是 word-break的属性值
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word;需要注意break-word 属性值已经被弃用但是由于遗留原因浏览器仍然支持它。指定该属性与同时使用word-break: normal 和 overflow-wrap: anywhere 的效果是一样的。
下面就来看看前三个属性
1normal
将 word-break 属性的值设置为 normal 将应用默认的断行规则 可以看到设置为 normal 时和不设置word-break时的效果是一样的这就是浏览器默认的断行行为。
2break-all
当属性值为 break-all 时对于 non-CJK (CJK 指中文/日文/韩文) 的文本可在任意字符间断行。 可以看到长单词在溢出的位置将剩余的文本进行了换行。使用 break-all 将在英语和其他相关语言系统中发生溢出的确切位置在两个字符之间断开一个单词。但是它不会对中文、日文和韩文文本应用相同的行为。因为 CJK 书写系统有自己的应用断点规则。
3keep-all
如果使用值 keep-all即使内容溢出浏览器也不会将分词应用于 CJK 文本。应用 keep-all 值的效果与非 CJK 书写系统的正常效果相同。简单来说就是像英语这种 CJK 文本不会断行像中文这种 Non-CJK 文本表现同 normal。 4浏览器兼容性
