css單行居中,兩行居左,超過兩行省略

這題就厲害了我的哥。

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

不愿看長篇大論的可以先看看效果:-webkit- 內核下 Demo 戳我

image.png

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

首先是單行居中,多行居左

居中需要用到 text-align:center,居左是默認值也就是text-align:left。如合讓兩者結合起來達到單行居中,多行居左呢?這就需要多一個標簽,假設一開始我們定義如下:

<h2>單行居中,多行居左</h2>
<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;
}

得到的效果如下:


image.png

超出兩行省略

完成了第一步,接下來要實現的是超出兩行顯示省略符號。

多行省略是有專門的新 CSS 屬性可以實現的,但是有些兼容性不大好。主要用到如下幾個:

  • display: -webkit-box; // 設置display,將對象作為彈性伸縮盒子模型顯示
  • -webkit-line-clamp: 2; // 限制在一個塊元素顯示的文本的行數
  • -webkit-box-orient: vertical; // 規定框的子元素應該被水平或垂直排列

上述 3 條樣式配合 overflow : hiddentext-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;
}

看看效果如下:

image.png

(在 -webkit- 內核瀏覽器下)發現,雖然超出兩行的是被省略了,但是第一行也變回了居左,而沒有居中

看回上面的 CSS 中的 p 元素,原因在于我們第一個設置的 display: inline-block ,被接下來設置的display: -webkit-box 給覆蓋掉了,所以不再是 inline-block 特性的內部 p 元素占據了一整行,也就自然而然的不再居中,而變成了正常的居左展示。

記得上面我們解決單行居中,多行居左時的方法嗎?上面我們添加多了一層標簽解決了問題,這里我們再添加多一層標簽,如下:

<h2><p><em>單行居中,多行居左<em></p></h2>

這里,我們再添加一層 em 標簽,接下來,

  • 設置 emdisplay: -webkit-box
  • 設置 pinline-block
  • 設置 h2text-align: center

嘿!通過再設置多一層標簽,解決 display 的問題,完美解決問題,再看看效果,和一開始的示意圖一樣:

image.png

-webkit- 內核下 Demo 戳我

法二: 偽元素單行絕對定位障眼法

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

上面我們為了讓第一行居中,使用了三層嵌套標簽。

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

<div class="container">
    <h2>
        <p>我是單行標題居中</p>
        <p class="pesudo">我是單行標題居中</p>
    </h2>
</div>

這里,新添加了一行 class 為 pesudop 標簽,標簽內容與文本內容一致,但是我們限定死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>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。