談談一些有趣的CSS題目（五）-- 單行置中，兩行居左，超過兩行省略

標籤：

開本系列，討論一些有趣的 CSS 題目，拋開實用性而言，一些題目為了拓寬一下解決問題的思路，此外，涉及一些容易忽視的 CSS 細節。

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法

談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型

談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少

談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit

所有題目匯總在我的 Github 。

 

5、單行置中顯示文字，多行居左顯示，最多兩行超過用省略符號結尾

這題就厲害了我的哥。

題目就是如上要求，使用純 CSS，完成單行文本置中顯示文字，多行居左顯示，最多兩行超過用省略符號結尾，效果如下：

不願看長篇大論的可以先看看效果：-webkit- 核心下 Demo 戳我

接下來就一步一步來實現這個效果。

 

首先是單行置中，多行居左

置中需要用到 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，將對象作為Auto Scaling盒子模型顯示
• -webkit-line-clamp: 2; // 限制在一個塊元素顯示的文本的行數
• -webkit-box-orient: vertical; // 規定框的子項目應該被水平或垂直排列

上述 3 條樣式配合 overflow : hidden 和 text-overflow: ellipsis 即可實現 webkit 核心下的多行省略。好，我們將上述說的一共 5 條樣式添加給 p 元素

p {    display: inline-block;    text-align: left;}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 的問題，完美解決問題，再看看效果，和一開始的一樣：

-webkit- 核心下 Demo 戳我

 法二: 虛擬元素單行絕對位置障眼法

是的，還有第二種方法......

上面我們為了讓第一行置中，使用了三層嵌套標籤。

這次我們換一種思路，只使用兩層標籤，但是我們加多一行。結構如下：

<div class="container">    <h2>        <p>我是單列名置中</p>        <p class="pesudo">我是單列名置中</p>    </h2></div>

這裡，新添加了一行 class 為 pesudo 的 p 標籤，標籤內容與常值內容一致，但是我們限定死class="pesudo" 的 p 標籤高度 height 與上面的 p 的行高 line-height一致，並設定 overflow:hidden ，那麼這個 p 標籤最多隻能能展示出一行文本，接下來使用絕對位置，定位到 h2 的頂部，再設定 text-align:center 以及背景色與 h2 背景色一致。

這樣最多顯示單行且樣式為置中的 class="pesudo" p 標籤就重疊到了原本的 p 標籤之上。表現為單行置中，多行時第一行則鋪滿，解決了我們的問題。多行省略與方法一相同。CSS 如下：

<div class="container">    <h2>        <p>我是單列名置中</p>        <p class="pesudo">我是單列名置中</p>    </h2></div>

-webkit- 核心下 Demo 戳我

 

所有題目匯總在我的 Github ，發到部落格希望得到更多的交流。

到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

談談一些有趣的CSS題目（五）-- 單行置中，兩行居左，超過兩行省略