多行文本
1、white-space: pre-wrap;
保留连续的空白符。在遇到换行符或 <br> 元素时,或者根据填充行框盒子的需要换行。
2、word-break: break-word;
-
如果单词太长而无法在当前行容纳,浏览器可以尝试在单词内部进行断行,以避免内容溢出容器。
-
这通常与
overflow: hidden;
或overflow: auto;
一起使用,以确保长单词在溢出容器边界时能够适当地断行。
white-space: pre-line;
合并连续的空白符合并。在遇到换行符或 <br> 元素时,或者根据填充行框盒子的需要换行。
1、white-space (
white-space-collapse 和 text-wrap 的简写)
指定了两件事:
- 空白字符是否合并,以及如何合并。
- 是否换行,以及如何换行。
2、word-break
怎样在单词内断行
(1)normal: 使用默认的断行规则。
(2)break-all: 对于 non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。
(3)keep-all: CJK 文本不断行。Non-CJK 文本表现同 normal
。
(4) break-word: 已弃用
他的效果是word-break: normal
和 overflow-wrap: anywhere
的合,不论 overflow-wrap的值是多少。
备注:与 word-break: break-word
和 overflow-wrap: break-word
对比,
word-break: break-word
将在文本可能溢出其容器的确切位置创建一个断点。
单行文本
超出width以省略号显示