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>
