將字體與字形對齊

我正在嘗試將字體與引號字形進行對齊。 display: -moz-grid;將創建預期的行爲，但會忽略div，而且它不是跨瀏覽器解決方案。將字體與字形對齊

任何其他方式？

<div> 
    <i class="fa fa-quote-left"></i> 
    <span>Some random text Some rando random text Some random text Some random text Some random text Some random text</span> 
</div> 

div { 
    width: 400px 
} 

span { 
    display: -moz-grid; 
}

http://jsfiddle.net/k1byph3h/

來源

2016-03-04 user2990084

你去一個懸掛縮進？你可以通過創建一個block formatting context來做到這一點。下面的方法使用overflow:hidden，它通常對沒有設置寬度和高度的元素沒有可見的影響;但您可以使用該MDN頁面上列出的任何一種方法。

div { 
 
    width: 400px 
 
} 
 

 
i.fa { 
 
    float:left; 
 
    margin-right: 0.2em; 
 
} 
 
span { 
 
    overflow:hidden; 
 
    display:block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<div> 
 
    <i class="fa fa-quote-left"></i> 
 
    <span>Some random text Some rando random text Some random text Some random text Some random text Some random text</span> 
 
</div>

來源

2016-03-04 00:27:47

爲什麼溢出：隱藏;那樣工作？塊與隱藏的組合對我來說似乎是某種類型的黑魔法。那麼，顯然flex或表的作品。 – user2990084

@ user2990084它與浮動如何與DOM中的元素交互。有時它看起來有點任意，但是塊格式上下文在規範中已經相當成熟，所以您可以依賴它的相當一致。這取決於花車的運作方式。官方的規格可以在這裏找到：https：//www.w3.org/TR/CSS2/visuren.html#block-formatting –

將字體與字形對齊

回答

相關問題