帶有行高的文本最後有一個圖標。如何在換行後正確顯示它？

我嘗試創建一個文本，並在文本後我想放置一個圖標。圖標高於文本，需要垂直居中。帶有行高的文本最後有一個圖標。如何在換行後正確顯示它？

我嘗試過不同的事情，但由於文本可以超過2行，我遇到了問題。例如，我使用line-height =圖標的高度，然後用一些填充將圖標作爲背景圖像向右移動。但只要文雲兩行以上這不工作了：

這裏是一個小提琴： https://jsfiddle.net/m1ten8Ld/

只要文本是在一行上它完全符合：

但只要它超過2線，它不再工作了：

任何人都有一個想法，我可以解決這個問題嗎？

Fiddlecode：

div { 
    background-image: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50'); 
    background-repeat: no-repeat; 
    background-position: right; 
    line-height: 50px; 
    padding-right: 150px; 
    display: inline-block; 
    height: 50px; 
}

來源

2017-02-14 nbar

這是你試圖做什麼？ https://jsfiddle.net/m1ten8Ld/1/（調整框架來檢查行爲） –

您可以通過僞:after

div { 
 
    padding-right: 150px;/* is it necessary ? */ 
 
    display: inline-block; 
 
} 
 
div:after { 
 
    content: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50'); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-right: -150px;/* necessary if padding set earlier ? */ 
 
}

<div>This is a Text and the Icon should always be here -></div>

來源

2017-02-14 16:11:37

是完美的，我是如此接近。我嘗試過：之後，但我錯過了'vertical-align：middle;'Ty！ – nbar

還有一件事：如果圖標是動態的（例如使用PHP創建），你會怎麼做？你會在HTML輸出中創建一個樣式標籤嗎？在我的情況下，這個圖標只是半動態的，所以我可以用不同的類來解決這個問題。 – nbar

是的，如果你的圖標是動態的，在插入文本內容後插入到標籤中，否則你可以使用CSS和屬性範圍的樣式標籤（https://www.w3.org/wiki/HTML/元素/樣式） –

希望我理解你的問題中插入圖像。您可以使用CSS :before或:after選擇器實現結果，如下所示。我建議你使用fontAwesome或類似的圖標字體。

div { 
 
    background-image: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50'); 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
    line-height: 50px; 
 
    padding-right: 150px; 
 
    display: inline-block; 
 
    height: 50px; 
 
    position: relative; 
 
} 
 

 
div:before { 
 
    content: "\f013"; 
 
    font-family: fontAwesome; 
 
    float: left; 
 
    position: realtive; 
 
    height: 50px; 
 
    line-height: 50px; /* Adjust as needed */ 
 
    font-size: 18px; 
 
    display: block; 
 
    margin-right: 10px; 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
This is a Text and the Icon should always be here -> 
 
</div>

>> fontAwesome cheat-sheet.

來源

2017-02-14 16:11:45

帶有行高的文本最後有一個圖標。如何在換行後正確顯示它？

回答

相關問題