css - 如何强制一个很长的词与图像保持在同一行？

Question

我想强制一个很长的单词的文本与我的图像保持在同一行。我知道这个词需要换行，但我希望第一行与图像保持对齐，而不是第一行跳到图像之后的行。我的布局需要是动态的，因此为文本设置静态宽度或高度是不可能的。这是我的代码:

HTML:

<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>

CSS:

img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}

fiddle :http://jsfiddle.net/JvFAw/

更新:我可能会将图像放在父 DIV 的背景中，并使用边距来抵消图像中的文本，除非有人可以提出更优雅的建议

更新 2:按照 paulie_d 的建议制作了一个真实世界的例子

http://jsfiddle.net/JvFAw/4/

Answer 1

伪类“first-line”和“white-space”属性可能正是您要寻找的。

p:first-line {
white-space: nowrap;

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space