小洛的前端技术博客Appearance
css文字换行属性
TIP
在一些内容超出的情况下，我们一般会使用word-break和word-wrap属性来控制换行，有几个属性可能会混淆
word-break：单词打断换行
css
/* 1. 默认规则：在空格或连字符处换行 */
.word-normal {
word-break: normal;
}
/* 2. 单词内强制换行：长单词会被强行截断 */
.word-break-all {
word-break: break-all;
}
/* 3. 保持单词完整性：只能在空格或连字符处换行 */
.word-keep-all {
word-break: keep-all;
}/* 1. 默认规则：在空格或连字符处换行 */
.word-normal {
word-break: normal;
}
/* 2. 单词内强制换行：长单词会被强行截断 */
.word-break-all {
word-break: break-all;
}
/* 3. 保持单词完整性：只能在空格或连字符处换行 */
.word-keep-all {
word-break: keep-all;
}word-wrap (overflow-wrap)：长内容换行
css
/* 1. 默认规则：只在空格处换行 */
.overflow-normal {
word-wrap: normal;
}
/* 2. 单词内换行：超长内容会在单词内强制换行 */
.overflow-break-word {
word-wrap: break-word;
/* 现代浏览器建议使用overflow-wrap替代 */
overflow-wrap: break-word;
}/* 1. 默认规则：只在空格处换行 */
.overflow-normal {
word-wrap: normal;
}
/* 2. 单词内换行：超长内容会在单词内强制换行 */
.overflow-break-word {
word-wrap: break-word;
/* 现代浏览器建议使用overflow-wrap替代 */
overflow-wrap: break-word;
}white-space：空白和换行处理
css
/* 1. 默认：合并空白，自动换行 */
.whitespace-normal {
white-space: normal;
}
/* 2. 保留空白：类似<pre>标签，不自动换行 */
.whitespace-pre {
white-space: pre;
}
/* 3. 不换行：强制在一行显示 */
.whitespace-nowrap {
white-space: nowrap;
}
/* 4. 保留空白+自动换行 */
.whitespace-pre-wrap {
white-space: pre-wrap;
}
/* 5. 合并空白+保留换行符 */
.whitespace-pre-line {
white-space: pre-line;
}/* 1. 默认：合并空白，自动换行 */
.whitespace-normal {
white-space: normal;
}
/* 2. 保留空白：类似<pre>标签，不自动换行 */
.whitespace-pre {
white-space: pre;
}
/* 3. 不换行：强制在一行显示 */
.whitespace-nowrap {
white-space: nowrap;
}
/* 4. 保留空白+自动换行 */
.whitespace-pre-wrap {
white-space: pre-wrap;
}
/* 5. 合并空白+保留换行符 */
.whitespace-pre-line {
white-space: pre-line;
}