CSS文本样式

概述
文本是网页的主要元素，CSS通过字体样式和文本样式等来设置文本的外观。 CSS的文本样式主要包括文本的颜色、对齐方式、修饰、缩进和间距等。
1.文本颜色color
为元素指定文本颜色。
text文本 
	
#text_test1{
	color:green;
}
2.文本水平对齐text-align
指定文本段落的水平对齐方式，有以下几种： left（向左对齐）； right（向右对齐）； center（水平居中对齐）； justify（水平两端对齐）。
text文本 
	
#text_test2{
	display: inline-block;
	width: 100%;
	text-align:center;
}
3.文本修饰text-decoration
text-decoration 是用来设定文本的下划线，上划线，删除线。 text-decoration其实是以下三个属性的缩写： text-decoration-line：none，underline，overline，line-through text-decoration-color：颜色表示法 text-decoration-style：solid、double、dotted、dashed等
text文本 
	
#text_test3{
	/* 删除线、红色、点状*/
	text-decoration: line-through red dashed;
}
4.文本首行缩进text-indent
为文本段落指定首行缩进。 属性值可以使用不同单位的数值、em字符宽度的倍数或者相对于浏览器窗口设百分比，可以使用负值，建议使用em做单位。
text文本 
	
#text_test4{
	display: inline-block;
	width: 100%;
	text-indent: 2em;
}
5.英文字体大小写text-transform
为文本指定英文字母大小写规则，有以下几种： capitalize（首字母大写） uppercase（所有字母全部大写） lowercase（所有字母全部小写）
text文本 
	
#text_test5{
	text-transform: capitalize;
}
6.字间距letter-spacing
为文本指定字间距，字间距（常用单位为px）。
text文本 
	
#text_test6{
	letter-spacing: 1em;
}
7.空白符处理white-space
设置空白符（如空格、回车）和换行的处理方式。
属性值 换行符 空格和Tab 文本超出容器宽度
nomal 忽略 折叠 换行
nowrap 忽略 折叠 不换行
pre 换行 保持原样 不换行
pre-wrap 换行 保持原样 换行
pre-line 换行 折叠 换行
inherit 继承 继承 继承
t ext文本text 文本text文本text文本text 文本text文本text文本 
	
<span class="font_class" id="text_test7">t    ext文本text
文本text文本text文本text
文本text文本text文本</span>
		

	
#text_test7{
	white-space: nowrap;
}
8.文本溢出处理text-overflow
指定元素中文本溢出的处理方式。 text-overflow有两个属性值，clip和ellipsis。 clip:表示直接裁切文本，不显示省略标记（…）； ellipsis:表示文本溢出时显示省略标记（…） 需要注意的是，要想这两个属性起真正的作用，需要配合overflow:hidden;white-space:nowrap;使用。 overflow:hidden;代表着超出文本的部分不显示 white-space:nowrap;代表强制文本在一行显示。
text文本text文本text文本text文本text文本text文本text文本text文本text文本 
	
#text_test8{
	display: inline-block;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
9.文字阴影text-shadow
设置文本阴影样式。 属性值为：阴影水平延伸值 阴影垂直延伸值 阴影模糊作用距离 阴影颜色
text文本 
	
#text_test9{
	text-shadow: 3px 3px 6px #0055ff;
}
10.文字换行overflow-wrap(word-wrap)
设置长单词或URL地址换行到下一行。 normal（正常） break-warp（换行） word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
this is a very long thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword hahahahahahahahahahahahahah.
this is a very long thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword hahahahahahahahahahahahahah. 
	
#text_test10{
	display: block;
	width:100%;
	overflow-wrap: break-word;
}
#text_test11{
	display: block;
	width:100%;
	overflow-wrap:normal;
}
11.文字打断word-break
word-break 属性用来标明怎么样进行单词内的断句。 normal：使用浏览器默认的换行规则。 break-all：允许在单词内换行 keep-all：只能在半角空格或连字符处换行
this is a very long thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword hahahahahahahahahahahahahah. 
	
#text_test12{
	word-break: break-all;
}
12.文字两端对齐text-align-last
text-align的属性，它控制的是行内内容如何相对它的父级元素对齐。需要注意的是text-align: justify对最后一行无效的，所以当文字只有一行是该方法无效。 css中有一个text-align-last属性，可以使只有一行的文字也两端对齐，有的时候需要先设置text-align:justify，不过属性并不是所有浏览器都兼容的。 text-align-last参考资料
属性值 释义
auto 无特殊对齐方式
left 内容左对齐
center 内容居中对齐
right 内容右对齐
justify 内容两端对齐
start 内容对齐开始边界
end 内容对齐结束边界
张三 李四四 王五 刘六六 
	
<span class="text_class">张三</span>
<span class="text_class">李四四</span>
<span class="text_class">王五</span>
<span class="text_class">刘六六</span>
		

	
.text_class{
	display: block;
	width: 120px;
	text-align-last: justify;
}
s