在没有换行符的情况下围绕文本包装div

Question

我的网站上有一些div，但他们只在IE中表现正常（我试过IE9），而不是在Firefox，Chrome或Safari上。问题是，div被设置为工具提示，它需要自动知道包装其内容所需的宽度。如果我首先显示代码然后提出问题，可能会更容易：

CSS

div {
    position: absolute;
    text-align: left;
    padding: 8px;
    font-size: .8em;
    line-height: 1.5em;
    background: #eee;
    border: solid 1px #aaa;
    border-radius: 8px;
    pointer-events: none;
}

div img {
    float: left;
    margin-right: 5px;
}

HTML

<div>
    <img src='img/tooltips/image.jpg'>
    <em>Name:</em> Lorem ipsum<br />
    <em>Adress:</em> Dolor sit amet<br />
    <em>Job:</em> bli blu bla bli blu bla
</div>

图像为75x75像素。

我的问题是，当第一行下面的文字比它长时，行断开会导致它离开位置并在图片下面。我想要做的是每一行只是一行而div包含所有文本。我已尝试white-space: nowrap;以及white-space的所有不同值但是虽然它使线条连续，但div不会更改其宽度以容纳所有文本。任何解决方案？

谢谢。

Answer 1

我有同样的问题，我找到了最简单的解决方案。只需写下

 white-space: nowrap;

并确保它是浮动的：左;或浮动：正确;

这是您需要的所有代码。

Answer 2

我使用这样的解决方案取得了成功：用em包裹p。

<div>
    <img src='img/tooltips/image.jpg'>
    <p>
    <em>Name:</em> Lorem ipsum<br />
    <em>Adress:</em> Dolor sit amet<br />
    <em>Job:</em> bli blu bla bli blu bla bli blu bla bli blu bla 
    </p>
</div>

添加此样式：

p {
    float: left;
    margin: 0;
    padding: 0;
}

Answer 3

尝试如下，它会帮助你...

小提琴： http://jsfiddle.net/RYh7U/177/

<强> HTML：

<div>
    <img src='img/tooltips/image.jpg'>
    <em>Name:</em> Lorem ipsum
    <em>Adress:</em> Dolor sit amet
    <em>Job:</em> bli blu bla bli blu bl asdfgsdgsdgsdgdsg
</div>

<强> CSS：

div {
    position: absolute;
    text-align: left;
    padding: 8px;
    font-size: .8em;
    line-height: 1.5em;
    background: #eee;
    border: solid 1px #aaa;
    border-radius: 8px;
    pointer-events: none;
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}



div img {
    float: left;
    margin-right: 5px;
}

输出