空白符
定义:空白符指空格,制表符和回车,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>123@qq.com</dd> <dd>123@163.com</dd> </dl>