Question

我有一个“更多信息”图标，我想在一些包装文本的第一行的最后一个单词之后内联。就像这个例子中的问号......

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＆gt;＆gt; http://jsfiddle.net/JTSEU/

Answer 1

这里有一篇关于此的文章：

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>

希望这有帮助。

Answer 2

嗨，现在我认为唯一可行的方式就是

float:left and word-break:break-all

Chek这个小提琴可能可以帮助你http://jsfiddle.net/ZE2HR/改变包装器的最大宽度。

问题在于，单词的任何部分都会出现断字。

在第一行换行之前如何定位元素内联？

2 个答案: