如何強制一個非常長的單詞與圖像保持同一行？

我想強制一個非常長的單詞的文本與我的圖像保持一致。我知道這個詞將需要包裝，但我希望第一行保持與圖像對齊，而不是第一行跳到圖像後面的行。我的佈局需要是動態的，因此爲文本設置靜態寬度或高度是不可能的。這裏是我的代碼：如何強制一個非常長的單詞與圖像保持同一行？

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

小提琴：http://jsfiddle.net/JvFAw/

更新：我可以把圖像中的父DIV的背景和使用頁邊距以抵消圖片中的文字，除非有人可以建議更優雅的東西

UPDATE2：由現實世界的例子所推薦的paulie_d

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

來源

2014-01-23 FiZiX

我想說這是不可能的。但是像這樣？ http://jsfiddle.net/JvFAw/1/ – caramba

「真實世界」的問題？ –

@caramba你的解決方案唯一的問題是，如果圖像高於一行文字，文字將與圖像重疊 – FiZiX

由於缺乏一個更優雅的解決方案，我想我會做到這一點：

HTML：

<div class="container"> 
    <p class='inline-text'>antidisestablishmentarianismism</p> 
</div>

CSS：

div.container { 
    max-width: 211.5px; 
    background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top; 
    padding-left: 20px; 
} 
p.inline-text { 
    color:#F00; 
    word-wrap:break-word; 
    font-size: 18px; 
}

小提琴：http://jsfiddle.net/JvFAw/7/

來源

2014-01-24 13:54:41 FiZiX