2

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

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/

4

2 回答 2

0

Hi for now the only way i see it posible and simply is with

float:left and word-break:break-all

Chek this fiddle maybe can help you http://jsfiddle.net/ZE2HR/ changing the max-width of the wrapper.

The problem is that word-break breaks in any part of the word.

于 2013-10-17T20:26:59.810 回答
0

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

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-17T19:46:26.543 回答