在第一行換行之前如何定位內聯元素？

我有一些「更多信息」圖標，我想要在某些包裝文本的第一行的最後一個單詞後面內聯定位。就像本例中的問號...在第一行換行之前如何定位內聯元素？

If this is my pretend ? 
sentence, then I want the 
icon to be in the position 
where you see the question 
mark... line #1 above.

答案不是float: right;或position: absolute; top: 0; right: 0;

如果我使用這些那麼它看起來就像這樣......

If this is my pretend  ? 
sentence, then I want the 
icon to be in the position 
where you see the question 
mark... line #1 above.

我希望圖標以內聯方式出現，但我不想實際上將它放在內聯中，因爲文本會被動態插入，因此確定放置位置會很麻煩。我也喜歡輕量級的東西，所以最好不要使用Javascript或jQuery。

有沒有辦法用純CSS做到這一點？

的jsfiddle >>http://jsfiddle.net/JTSEU/

來源

2013-10-17 Kirkland

jsfiddle或codepen示例將會有所幫助。由於您對哪些css屬性有所限制，因此您不希望將更多信息圖標置於.. thx –

嘗試顯示：inline-block;或文本對齊 – teemo

，您說文本是動態的，那麼您如何計劃將問號定位在特定位置，而不知道文本會有多長？ –

有關於這方面的文章就在這裏：

http://www.adipalaz.com/experiments/css/positioning_inline_icon.html

只需查看源代碼，看看這正是如何做看起來很容易。

事情是這樣的：

<span class="p linkicon"> 
    The image is absolutely positioned relative to the containing element. 
    <a style="padding-right:0px" href="yourlink"> 
    <img style="right:-12px" height="9" width="12" alt="external link" src="http://www.adipalaz.com/experiments/style/img/ext-link.gif" /> 
    </a> 
</span>

希望這有助於。

來源

2013-10-17 19:46:26

這顯示了文本包裝塊中最後一行文本末尾的圖標。我想要在第一行結尾的圖標。 – Kirkland

這不回答這個問題，只是顯示如何使圖標內嵌 –

嗨，現在唯一的辦法我看到了更多鈔票，只是與

float:left and word-break:break-all

赤這種小提琴，也許可以幫助你http://jsfiddle.net/ZE2HR/改變包裝的最大寬度。

問題是單詞的任何部分都會出現單詞中斷。

來源

2013-10-17 20:26:59 DaniP

它也將圖標推出文本。我希望它顯示爲內聯，而不是內聯。 – Kirkland

它似乎不能posible，在jsfiddle，我建議一個元素不會離開空白我認爲這是最好的選擇。 – DaniP

在第一行換行之前如何定位內聯元素？

回答

相關問題