0

我的网站中有一些 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 不会改变其宽度以容纳所有文本。有什么解决办法吗？

谢谢你。

4

3 回答 3

3

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

 white-space: nowrap;

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

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

于 2014-01-05T20:05:39.247 回答
0

我通过这样的解决方案取得了成功：用.包裹emsp

<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;
}
于 2013-06-18T08:12:58.247 回答
0

试试下面的方法，它会帮助你...

小提琴：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;
}

输出 ：

在此处输入图像描述

于 2013-06-18T08:13:39.743 回答