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;

これで問題は解決したようです。人々がソリューションの適用に興味がある場合に備えて、完全なコードを次に示します。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;

}
于 2013-01-07T17:48:22.880 に答える