0

HTML 代码

<div class="container">
    <div class="tip_text">D</div>
    <div class="tip_content">test</div>
</div>

<br /><br /><br />

<div class="container">
    <div class="tip_text">D2</div>
    <div class="tip_content">test test test test test test test</div>
</div>

CSS 代码

.container{
    position: relative;
    float: left;
}

.tip_text{
    position: relative;
    float:left;
    width: 130px;
    height: 30px;
    margin: 0px;
    padding: 2px;
    text-align: left;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #acacac;
    cursor:help;
}


.tip_content{
    background: #333;
    color: #fff;
    padding: 10px 15px;
    z-index: 98;
    min-height: 15px;
    position:absolute;
    left: 100%;
    font-size: 12px;

}

上面的代码有以下我试图解决的问题。当大量文本放入其中时，“tip_content” div 不会扩展。我不知道为什么。我不想设置宽度，我希望它们根据放入的文本量增长。这应该像 div 的行为一样默认发生，但在这种情况下不是。如果有人对此问题有深入了解，将不胜感激。

http://jsfiddle.net/Qyrjf/

4

1 回答 1

1 
white-space: nowrap;

This seems to fix the problem. Here is the full code in case people are interested in the application of the solution. It is using CSS and CSS3 to create tooltips.

HTML

<div class="container">
    <div class="tip_text">D</div>
    <div class="tip_content">test</div>
</div>

<br /><br /><br />

<div class="container">
    <div class="tip_text">D2</div>
    <div class="tip_content">test test test test test test test</div>
</div>

CSS (full)

.container{
    position: relative;
    float: left;
}

.tip_text{
    position: relative;
    float:left;
    width: 130px;
    height: 30px;
    margin: 0px;
    padding: 2px;
    text-align: left;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #acacac;
    cursor:help;
}

.tip_text:hover + .tip_content{
    opacity: .9;
    visibility: visible;
    margin-left: 10px;
}


.tip_content:before{

    border: solid;
    border-color:  transparent #333;
    border-width: 6px 6px 6px 0;
    content: "";
    z-index: 99;
    position:absolute;
    left:-6px;
    top:12px;
}

.tip_content{
    background: #333;
    color: #fff;
    padding: 10px 15px;
    z-index: 98;
    min-height: 15px;
    float: left;
    left: 100%;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;

    -moz-box-shadow: 2px 2px 2px #666;
    -webkit-box-shadow: 2px 2px 2px #666;
    box-shadow: 2px 2px 2px #666;

    opacity: 0;
    margin-left: 20px;
    visibility: hidden;

    -webkit-transition-property:opacity, visibility, margin-left;
    -webkit-transition-duration:0.2s, 0.2s, 0.1s; 
    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

    -moz-transition-property:opacity, visibility, margin-left;
    -moz-transition-duration:0.2s, 0.2s, 0.1s;  
    -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

    -o-transition-property:opacity, visibility, margin-left;
    -o-transition-duration:0.2s, 0.2s, 0.1s; 
    -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

    transition-property:opacity, visibility, margin-left;
    transition-duration:0.2s, 0.2s, 0.1s; 
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

}
于 2013-01-07T17:48:22.880 回答