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

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

更新：我可以将图像放在父DIV的背景中，并使用边距来偏移图像中的文本，除非有人可以提出更优雅的内容

UPDATE2：按照paulie_d

的建议制作了一个真实世界的例子

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

Answer 1

伪级“第一线”和“白色空间”属性可能就是您所寻找的。

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

Answer 2

由于缺乏更优雅的解决方案，我想我会这样做：

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/

如何强迫一个很长的单词与图像保持同一条线？

2 个答案: