CSS学习笔记(三)空白符和换行

时间:2019-09-17
本文章向大家介绍CSS学习笔记(三)空白符和换行,主要包括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>123@qq.com</dd>
  <dd>123@163.com</dd>  
</dl>

 


 

$flag 上一页 下一页