Css 在第一次换行之前,如何定位内联元素?

Css 在第一次换行之前,如何定位内联元素?,css,Css,我有一个小的“更多信息”图标,我想把它放在一些包装文本第一行的最后一个单词之后。就像这个例子中的问号一样 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或位置:绝对;排名:0;右:0 如果我用这些,那么它会像这样 If this is my pretend

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

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
位置:绝对;排名:0;右: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实现这一点


JSFIDLE>

这里有一篇关于这方面的文章:

只要查看源代码,就可以很容易地看到它是如何完成的

大概是这样的:

<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>

图像相对于包含元素绝对定位。

希望这能有所帮助。

嗨,现在我认为唯一可行的方法就是

float:left and word-break:break-all
检查一下这个提琴也许可以帮你改变包装的最大宽度


问题是单词的任何部分都会出现分词。

一个JSFIDLE或codepen示例会很有帮助。。由于您对css属性有限制,因此您不希望将“更多信息”图标放置在。。thxtry显示:内联块;或者文本对齐,你说文本是动态的,那么你打算如何在不知道文本会有多长的情况下将问号定位在一个特定的位置?@jonathan>下面是一个JSFIDLE,显示了这个问题@这正是我的问题。我该怎么做?这显示了文本包装块中最后一行文本末尾的图标。我想把图标放在第一行的末尾。这并没有回答问题,只是显示了如何在行中创建图标。它还将图标从文本中推出。我希望它看起来是内联的,而实际上不是内联的。这似乎是不可能的,在我建议的JSFIDLE中,a元素不会留下空白,我认为这是最好的选择。