在開發中會遇到很多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路徑裡。當系統...