開本系列,討論一些有趣的 CSS 題目,拋開實用性而言,一些題目爲了拓寬一下解決問題的思路,此外,涉及一些容易忽視的 CSS 細節。css
解題不考慮兼容性,題目天馬行空,想到什麼說什麼,若是解題中有你感受到生僻的 CSS 屬性,趕忙去補習一下吧。html
不斷更新,不斷更新,不斷更新,重要的事情說三遍。git
談談一些有趣的CSS題目(一)-- 左邊豎條的實現方法github
談談一些有趣的CSS題目(二)-- 從條紋邊框的實現談盒子模型web
談談一些有趣的CSS題目(三)-- 層疊順序與堆棧上下文知多少瀏覽器
談談一些有趣的CSS題目(四)-- 從倒影提及,談談 CSS 繼承 inheritpost
全部題目彙總在個人 Github 。url
這題就厲害了個人哥。spa
題目就是如上要求,使用純 CSS,完成單行文本居中顯示文字,多行居左顯示,最多兩行超過用省略號結尾,效果以下:code
不肯看長篇大論的能夠先看看效果:-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 屬性能夠實現的,可是有些兼容性不大好。主要用到以下幾個:
上述 3 條樣式配合 overflow : hidden
和 text-overflow: ellipsis
便可實現 webkit
內核下的多行省略。好,咱們將上述說的一共 5 條樣式添加給 p
元素
p { display: inline-block; text-align: left; 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 的問題,完美解決問題,再看看效果,和一開始的示意圖同樣:
是的,還有第二種方法......
上面咱們爲了讓第一行居中,使用了三層嵌套標籤。
此次咱們換一種思路,只使用兩層標籤,可是咱們加多一行。結構以下:
<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>
全部題目彙總在個人 Github ,發到博客但願獲得更多的交流。
到此本文結束,若是還有什麼疑問或者建議,能夠多多交流,原創文章,文筆有限,才疏學淺,文中如有不正之處,萬望告知。