DIV與文字不

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; 

}