CSS：文本样式（缩进/对齐/字符间隔/文本装饰/空白格处理）_html/css_WEB-ITnose

通过CSS样式，可以设定文本的缩进，对齐，字符间隔等属性。

代码整理自w3school：http://www.w3school.com.cn

(一)首行数字缩进
  
首行缩进5em的段落。这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容
  
(二)首行数字缩进为负值
  
首行缩进-5em,padding-left=5em的段落(悬挂缩进的效果)。这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容
  
(三)首行相对父元素百分比缩进
  
    
首行相对父元素缩进20%。由于父元素是500px,因此本段落首行就缩进100px。这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容
  
  
    
      some text. some text. some text.      
this is a paragragh.
    
  
  
(四)文本对齐方式
    
    
这是一个居左的段落
    
这是一个居中的段落
    
这是一个居右的段落
  
  
(五)字间隔：设置字,单词 之间的间隔
  
This is a normal paragraph. 这是普通段落，这是普通段落。
  
The spaces between words will be increased. 单词之间的间距被扩大了，单词之间的间距被扩大了。
  
The spaces between words will be decreased. 单词之间的间距被缩小了，单词之间的间距被缩小了。
  
注：word-spacing属性对中文无效。
  
(六)字符间隔：设置字符或字母之间的间隔
  
This is a normal paragraph. 这是普通段落，这是普通段落。
  
The spaces between letters will be increased. 字符之间的间距被扩大了，字符之间的间距被扩大了。
  
The spaces between letters will be decreased. 字符之间的间距被缩小了，字符之间的间距被缩小了。
    
(七)字符转换：改变字母的大小写
  
Hello world转为大写：Hello world
  
Hello world转为大写：Hello world
  
Hello world转为每个单词首字母大写：Hello world
    
(八)字符装饰：下划线/贯穿线 等
  
下划线
  
上划线
  
(九)空格处理
  
(1)normal:这个    段落里面有 很多 的空格    以及很多的换行符，测试  不同的     空格处理方式
  
(2)pre:这个    段落里面有 很多 的空格    以及很多的换行符，测试  不同的     空格处理方式
  
(3)pre-wrap:这个    段落里面有 很多 的空格    以及很多的换行符，测试  不同的     空格处理方式
  
(4)pre-line:这个    段落里面有 很多 的空格    以及很多的换行符，测试  不同的     空格处理方式
  
(5)nowrap:这个    段落里面有 很多 的空格    以及很多的换行符，测试  不同的     空格处理方式

效果图：