CSS学习笔记（三）空白符和换行

空白符

定义：空白符指空格，制表符和回车，html默认将所有空白符合并成一个空格。

white-space

white-space: normal; // 合并空白符，自动换行
white-space: nowrap; // 合并空白符，不自动换行
white-space: pre-line; // 合并空白符(不包括换行符)，自动换行
white-space: pre; // 不合并空白符，自动换行
white-space: pre-nowrap; // 不合并空白符，不自动换行

【注意】 pre元素默认带有样式 white-space: pre;

文本换行

word-wrap: 用来实现长单词或url地址的自动换行

word-wrap: normal; // 浏览器只在半角和连字符进行换行
word-wrap: break-word; // 长单词从下一行开始

【注意】当white-space是nowrap或pre时，word-break和word-wrap都失效

word-break: 用来决定自动换行的处理方法

word-break: break-all;
word-break: kepp-all;

表格

对于表单元格的长文本来说，使用word-wrap或word-break来强制换行需要设置table-layout:fixed

伪元素换行

　　有一个Unicode字符，是专门代表换行符的:0x000A，在CSS中，写作'\000A'，可以简写为'\A'

　　但是，由于浏览器会合并空白符。因此，需要使用pre来阻止空白符的合并

<style>
dt,dd{display:inline;}
dd{margin: 0;font-weight:bold;}
dd+dt::before{content:'\A';white-space:pre;}
dd+dd::before{content:',';font-weight:normal;}
</style>
<dl>
  <dt>姓名:</dt>
  <dd>小火柴</dd>
  <dt>邮箱:</dt>
  <dd>[email protected]</dd>
  <dd>[email protected]</dd>  
</dl>