列表標題一 兩行垂直居中展示

2021-08-30 02:39:22 字數 909 閱讀 5239

在開發中會遇到很多list元件,例如左邊乙個img,右邊是內容介紹。

內容介紹的最上部往往是內容的標題,標題在進行省略ellipsis設定時,需要考慮產品需求:

比如我在專案中,設計希望兩行充滿高度,一行則垂直居中

實現截圖如下:

解決辦法:

html

class

="hd"

>

>

北京北京博泰酒店北京博泰酒店span

>

div>

>

class

="hd"

>

>

北京span

>

div>

css.hd

span

html

class

="box"

>

class

="content"

>

我是多多多多多多多多多多多多多多多行文字div

>

div>

css.box

.content

註解:

1、inline-block產生乙個「行框盒子」,附帶「幽靈空白節點」,使得外部的line-height起作用;

2、內聯元素預設基線對齊,通過vertical-align調整多行文字垂直位置。

**參照《css世界》

CSS中標題限制在兩行

css經常出現標題限制在兩行的情況,之後如果內容過多會顯示省略號 line clamp使用 display webkit box webkit line clamp 2 webkit box orient vertical linear gradient 建立以對角線方式漸變的影象 linear g...

awk輸出相同列的前兩行和後兩行

要求列印,第一列相同的頭兩行和後兩行 file ax bx 1 ax bx 2 ax bx 1 ax bx 8 ax bx 1 ax bx 3 ax bx 5 cx bx 1 cx bx 0 cx bx 1 cx bx 6 cx bx 9 ex bx 1 ex bx a ex bx 1 ex bx ...

python指令碼前兩行

1.第一行指定直譯器路徑 usr bin env python 詳細說明 usr bin python是告訴作業系統執行這個指令碼的時候,呼叫 usr bin下的python直譯器 usr bin env python這種用法是為了防止使用者沒有將python裝在預設的 usr bin路徑裡。當系統...