題目就是如上要求，使用純 CSS，完成單行文本居中顯示文字，多行居左顯示，最多兩行超過用省略號(hào)結(jié)尾，效果如下：
不愿看長(zhǎng)篇大論的可以先看看效果：-webkit- 內(nèi)核下
接下來就一步一步來實(shí)現(xiàn)這個(gè)效果。
首先是單行居中，多行居左
居中需要用到 text-align:center，居左是默認(rèn)值也就是text-align:left。如合讓兩者結(jié)合起來達(dá)到單行居中，多行居左呢？這就需要多一個(gè)標(biāo)簽，假設(shè)一開始我們定義如下：
單行居中，多行居左
現(xiàn)在，我們?cè)?h2 中間，嵌套多一層標(biāo)簽 p：
單行居中，多行居左
我們讓內(nèi)層 p 居左 text-align:left，外層 h2 居中 text-align:center，并且將 p 設(shè)置為display:inline-block ，利用 inline-block 元素可以被父級(jí) text-align:center 居中的特性，這樣就可以實(shí)現(xiàn)單行居中，多行居左，CSS 如下：
p {
display: inline-block;
text-align: left;
}
h2{
text-align: center;
}
得到的效果如下：
超出兩行省略
完成了第一步，接下來要實(shí)現(xiàn)的是超出兩行顯示省略符號(hào)。
多行省略是有專門的新 CSS 屬性可以實(shí)現(xiàn)的，但是有些兼容性不大好。主要用到如下幾個(gè)：
display: -webkit-box; // 設(shè)置display，將對(duì)象作為彈性伸縮盒子模型顯示
-webkit-line-clamp: 2; // 限制在一個(gè)塊元素顯示的文本的行數(shù)
-webkit-box-orient: vertical; // 規(guī)定框的子元素應(yīng)該被水平或垂直排列
上述 3 條樣式配合 overflow : hidden 和 text-overflow: ellipsis 即可實(shí)現(xiàn) webkit 內(nèi)核下的多行省略。好，我們將上述說的一共 5 條樣式添加給 p 元素
p {
display: inline-block;
text-align: left;
}
h2{
text-align: center;
}
（在 -webkit- 內(nèi)核瀏覽器下）發(fā)現(xiàn)，雖然超出兩行的是被省略了，但是第一行也變回了居左，而沒有居中。
看回上面的 CSS 中的 p 元素，原因在于我們第一個(gè)設(shè)置的 display: inline-block ，被接下來設(shè)置的display: -webkit-box 給覆蓋掉了，所以不再是 inline-block 特性的內(nèi)部 p 元素占據(jù)了一整行，也就自然而然的不再居中，而變成了正常的居左展示。
記得上面我們解決單行居中，多行居左時(shí)的方法嗎？上面我們添加多了一層標(biāo)簽解決了問題，這里我們?cè)偬砑佣嘁粚訕?biāo)簽，如下：
單行居中，多行居左
這里，我們?cè)偬砑右粚?em 標(biāo)簽，接下來，
設(shè)置 em 為 display: -webkit-box
設(shè)置 p 為 inline-block
設(shè)置 h2 為 text-align: center
嘿！通過再設(shè)置多一層標(biāo)簽，解決 display 的問題，完美解決問題…
法二: 偽元素單行絕對(duì)定位障眼法
是的，還有第二種方法……
上面我們?yōu)榱俗尩谝恍芯又?，使用了三層嵌套?biāo)簽。
這次我們換一種思路，只使用兩層標(biāo)簽，但是我們加多一行。結(jié)構(gòu)如下：
我是單行標(biāo)題居中
我是單行標(biāo)題居中
這里，新添加了一行 class 為 pesudo 的 p 標(biāo)簽，標(biāo)簽內(nèi)容與文本內(nèi)容一致，但是我們限定死class="pesudo" 的 p 標(biāo)簽高度 height 與上面的 p 的行高 line-height一致，并設(shè)置 overflow:hidden ，那么這個(gè) p 標(biāo)簽最多只能能展示出一行文本，接下來使用絕對(duì)定位，定位到 h2 的頂部，再設(shè)置 text-align:center 以及背景色與 h2 背景色一致。
這樣最多顯示單行且樣式為居中的 class="pesudo" p 標(biāo)簽就重疊到了原本的 p 標(biāo)簽之上。表現(xiàn)為單行居中，多行時(shí)第一行則鋪滿，解決了我們的問題。多行省略與方法一相同。CSS 如下：
我是單行標(biāo)題居中
我是單行標(biāo)題居中
