将 div 环绕在没有换行符的文本周围答案

【问题标题】：wrap a div around text without line breaks将 div 环绕在没有换行符的文本周围
【发布时间】：2013-06-18 08:02:31
【问题描述】：

我的网站中有一些 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>

图片为 75x75px。

我的问题是，当第一行下方的文本比它长时，换行符会导致它脱离位置并位于图片下方。我想要做的是每一行只是一行，而 div 包含所有文本。我已经尝试过white-space: nowrap; 和white-space 的所有不同值，但是尽管它使线条连续，但 div 不会改变其宽度以容纳所有文本。有什么解决办法吗？

谢谢。

【问题讨论】：

标签： css html whitespace line-breaks

【解决方案1】：

我遇到了同样的问题，我找到了最简单的解决方案。就写吧

 white-space: nowrap;

并确保它是浮动的：左；或浮动：对；

这就是您需要的所有代码。

【讨论】：

【解决方案2】：

我通过这样的解决方案取得了成功：用p 包裹ems。

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

【讨论】：

【解决方案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;
}

输出：

【讨论】：