首先是單行居中，多行居左
居中需要用到 text-align:center，居左是默認值也就是text-align:left。如合讓兩者結合起來達到單行居中，多行居左呢？這就需要多一個標簽，假設一開始我們定義如下：
<h2>單行居中，多行居左</h2>
現在，我們在 h2 中間，嵌套多一層標簽 p：
<h2><p>單行居中，多行居左</p></h2>
我們讓內層 p 居左 text-align:left，外層 h2 居中 text-align:center，並且將 p 設置為 display:inline-block ，利用 inline-block 元素可以被父級 text-align:center 居中的特性，這樣就可以實現單行居中，多行居左，CSS 如下：
p {
display: inline-block; text-align: left; } h2{ text-align: center; }
得到的效果如下：
超出兩行省略
完成了第一步，接下來要實現的是超出兩行顯示省略符號。
多行省略是有專門的新 CSS 屬性可以實現的，但是有些兼容性不大好。主要用到如下幾個：
- display: -webkit-box; // 設置display，將對象作為彈性伸縮盒子模型顯示
- -webkit-line-clamp: 2; // 限制在一個塊元素顯示的文本的行數
- -webkit-box-orient: vertical; // 規定框的子元素應該被水平或垂直排列
上述 3 條樣式配合 overflow : hidden 和 text-overflow: ellipsis 即可實現 webkit 內核下的多行省略。好，我們將上述說的一共 5 條樣式添加給 p 元素
p {
display: inline-block; text-align: left; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } h2{ text-align: center; }
看看效果如下：
（在 -webkit- 內核瀏覽器下）發現，雖然超出兩行的是被省略了，但是第一行也變回了居左，而沒有居中。
看回上面的 CSS 中的 p 元素，原因在於我們第一個設置的 display: inline-block ，被接下來設置的 display: -webkit-box 給覆蓋掉了，所以不再是 inline-block 特性的內部 p 元素占據了一整行，也就自然而然的不再居中，而變成了正常的居左展示。
記得上面我們解決單行居中，多行居左時的方法嗎？上面我們添加多了一層標簽解決了問題，這里我們再添加多一層標簽，如下：
<h2><p><em>單行居中，多行居左<em></p></h2>
這里，我們再添加一層 em 標簽，接下來，
- 設置
em為display: -webkit-box - 設置
p為inline-block - 設置
h2為text-align: center
嘿！通過再設置多一層標簽，解決 display 的問題，完美解決問題，再看看效果：
