Question

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/

Answer 1

white-space: nowrap;

这似乎解决了这个问题。以下是人们对解决方案应用感兴趣的完整代码。它使用CSS和CSS3来创建工具提示。

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

}

div没有用文字扩展

1 个答案: