1.文本对齐方式（水平方向） text-align
这个属性能控制标签内文本的对齐方式，还能控制子元素中行内元素和行内块级元素的对齐方式（水平方向），这个属性会被子元素继承
它有三个值：
left：左对齐（默认）
center：居中对齐
right：右对齐
<!DOCTYPE html>
<html>
<body>
<div class="box" style="text-align:center">
div的文本
</div>
<div class="box" style="text-align:right">
<psan>子元素span</psan>
</div>
<div class="box" style="text-align:right">
<div>这个样式会被子元素继承</div>
</div>
</body>
</html>
2.文本缩进 text-indent
用于定义块级元素中第一个内容行的缩进,默认为0
这个属性对于标签内的文本和行内元素，行内块级元素都有效。且会被继承
<body>
<div>默认缩进为0</div>
<div style="text-indent: 50px;">缩进50px的文本</div>
<!-- 除了文本，行内块元素也首这个属性影响 -->
<div style="text-indent: 50px;">
<input type="text" placeholder="input输入框缩进50px">
</div>
<!-- 这个样式会被继承 -->
<div style="text-indent: 50px;">
<p>这个样式会被继承</p>
</div>
</body>
3.文本修饰 text-decoration
这个属性可能的值为：
none 默认。定义标准的文本。
underline 定义文本下的一条线。相当于<u>标签
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。相当于<del>标签
<div>默认无修饰</div>
<div style="text-decoration: underline">underline 下划线</div>
<div style="text-decoration: overline">overline 上划线</div>
<div style="text-decoration: line-through">line-through 删除线</div>
<div style="text-decoration: blink">blink</div>
4.字符间距和字间距 letter-spacing/word-spacing
letter-spacing控制的是单个字符件的间距（包括汉字），而word-spacing控制的是单词的间距（对汉字无效）
<div>this is a good day（默认）</div>
<div style="letter-spacing: 10px;">this is a good day</div>
<div style="letter-spacing: 10px;">你好世界</div>
<div style="word-spacing: 10px;">this is a good day</div>
<div style="word-spacing: 10px;">你好世界</div>
5.子元素排列方向 direction
direction 有2个值：
ltr 默认。文本或者行子元素从左侧到右侧依次排列。
rtl 文本或者行子元素从右侧到左侧依次排列。
这个属性指的是子元素的排列方向，对行内块元素和行子元素有效（块级元素会换行当然不行咯）。一般用在拥有多个子元素的容器身上
<body>
<!-- 默认 -->
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<!-- 子元素是行内块元素 -->
<div style="direction: rtl;">
<input type="text" style="width:80px;" placeholder="1">
<input type="text" style="width:80px;" placeholder="2">
<input type="text" style="width:80px;" placeholder="3">
</div>
<!-- 从右到左 -->
<div style="direction: rtl;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<!-- 与text-align的对比 text-align是整体子元素的对齐方式-->
<div style="text-align: right;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
6.控制文本的大小写 text-transform 属性
text-transform 属性有4个值：
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 单词首字母大写
uppercase 全部转为大写字母。
lowercase 全部转为小写字母。
<div>hello world</div>
<div style="text-transform: capitalize">hello world</div>
<div style="text-transform: uppercase">hello world</div>
<div style="text-transform: lowercase">hello world</div>
7.处理空白和文本换行 white-space
white-space控制空白字符的显示，同时还能控制是否自动换行
white-space有以下几个值：
normal：合并连续的空白符、换行符为一个空白符,超出容器则换行
pre：空白和换行会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。会原模原样的按照源代码中的格式进行输出，超出容器不会换行
nowrap：合并连续的空白符、换行符为一个空白符；超出容器不会换行,相当于在normal的基础上超出不换行
pre-wrap：保留空白符序列，但是正常地进行换行。相当于在pre的基础上超出则换行
pre-line：合并空白符序列，但是保留换行符。超出则换行
如图：
<div style="white-space: pre;">（pre）中间的多个空格 会被合并解析成一个
换行符被解析成空格
</div>
8.处理文本溢出 text-overflow
先看文本溢出容器时浏览器默认的效果
<div>女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
</div>
一般情况下，文本先放满第一行，如果放不下，则继续放第二行。如果容器高度不够，则文本向下溢出
如果文本被设置成不允许换行，则文本会向水平方向溢出
如果父元素设置overflow: hidden，上面2种情况会变成这样
CSS3 text-overflow属性指定当文本溢出包含它的元素且容器设置成overflow: hidden时，应该发生什么（通俗的说就是是否使用...来代替被修剪的文本）。
语法：text-overflow: clip|ellipsis|string
clip 修剪文本（默认）。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。貌似不支持
<body>
<div style="text-overflow: ellipsis;overflow: hidden;">女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
</div>
<div style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
</div>
</body>
个人认为text-overflow这个属性只能用于单行文本的容器，且限制很多，不是很实用。
如果想要在一个容器保留多行文本且有剪裁下效果，需要用到其他属性
<style>
div{
width:300px;
border: 1px solid red;
margin: 50px auto;
display: -webkit-box;
/* 纵向 */
-webkit-box-orient: vertical;
/* 分2行显示 无需再设置高度 */
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
<div >女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
</div>
兼容性方面，我测试了最新chrome，firefox都没有问题，但是IE11仍然不支持。需要另辟蹊径，具体方案如下：
(1)容器设置确定的高度，再设置行高（最好让他们成倍数），设置成相对定位
(2)使用伪元素，定位到右下角，配合背景色覆盖右下角原本的文本
注意：用来遮挡的伪元素的渐变色，以及他的宽度可以自行调整，以实际为准
具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<style>
.ellipsis{
width:300px;
border: 1px solid red;
margin: 50px auto;
position: relative;
/* 放2行 */
height: 50px;
line-height: 25px;
/* 超出隐藏 */
overflow: hidden;
}
.ellipsis::after{
position: absolute;
bottom:0;
right: 0;
content:"...";
line-height: 25px;
width:15%;
height:25px;
/* 使用渐变色遮挡原文本 */
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%);
/* 因为渐变色右边完全不透明，可以让...居右显示 */
text-align: right;
}
</style>
</head>
<body>
<div class="ellipsis">女生之间的友谊啊，就像塑料花，虽然假但永不凋零。不要轻易看不起谁，就算是杀马特，发量都比你多。
</div>
</body>
</html>
