題目就是如上要求蹬竖，使用純 CSS沼沈，完成單行文本居中顯示文字流酬，多行居左顯示，最多兩行超過用省略號結(jié)尾列另，效果如下：
不愿看長篇大論的可以先看看效果：-webkit- 內(nèi)核下
接下來就一步一步來實(shí)現(xiàn)這個(gè)效果芽腾。
首先是單行居中，多行居左
居中需要用到 text-align:center页衙，居左是默認(rèn)值也就是text-align:left摊滔。如合讓兩者結(jié)合起來達(dá)到單行居中，多行居左呢店乐？這就需要多一個(gè)標(biāo)簽艰躺，假設(shè)一開始我們定義如下：
單行居中，多行居左
現(xiàn)在眨八，我們在 h2 中間腺兴，嵌套多一層標(biāo)簽 p：
單行居中，多行居左
我們讓內(nèi)層 p 居左 text-align:left廉侧，外層 h2 居中 text-align:center页响，并且將 p 設(shè)置為display:inline-block ，利用 inline-block 元素可以被父級 text-align:center 居中的特性段誊，這樣就可以實(shí)現(xiàn)單行居中闰蚕，多行居左，CSS 如下：
p {
display: inline-block;
text-align: left;
}
h2{
text-align: center;
}
得到的效果如下：
超出兩行省略
完成了第一步连舍，接下來要實(shí)現(xiàn)的是超出兩行顯示省略符號没陡。
多行省略是有專門的新 CSS 屬性可以實(shí)現(xiàn)的，但是有些兼容性不大好烟瞧。主要用到如下幾個(gè)：
display: -webkit-box; // 設(shè)置display诗鸭，將對象作為彈性伸縮盒子模型顯示
-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)簽解決了問題筋粗，這里我們再添加多一層標(biāo)簽策橘，如下：
單行居中，多行居左
這里娜亿，我們再添加一層 em 標(biāo)簽丽已，接下來，
設(shè)置 em 為 display: -webkit-box
設(shè)置 p 為 inline-block
設(shè)置 h2 為 text-align: center
嘿买决！通過再設(shè)置多一層標(biāo)簽沛婴，解決 display 的問題，完美解決問題…
法二: 偽元素單行絕對定位障眼法
是的督赤，還有第二種方法……
上面我們?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)簽最多只能能展示出一行文本滩褥，接下來使用絕對定位病蛉，定位到 h2 的頂部，再設(shè)置 text-align:center 以及背景色與 h2 背景色一致瑰煎。
這樣最多顯示單行且樣式為居中的 class="pesudo" p 標(biāo)簽就重疊到了原本的 p 標(biāo)簽之上铺然。表現(xiàn)為單行居中，多行時(shí)第一行則鋪滿酒甸，解決了我們的問題魄健。多行省略與方法一相同。CSS 如下：
我是單行標(biāo)題居中
我是單行標(biāo)題居中
