3

現在、右側にボタンのリストがある Web アプリケーションを構築しています。ボタンが完全に表示されると、2 つの部分があり、次のようになります: http://jsfiddle.net/CFYRC/。

ただし、最初はすべてのボタンが非表示になっているため、ラベル部分のみが表示されます (ボタン テキスト セクションは非表示で、ボタン ラベルはすべてページの左側に配置されます)。ユーザーがラベルにカーソルを合わせると、ボタンがスライドして、そのボタンのテキストが表示されます。

注: 以下のコードは jsfiddle と同じです。

HTML

<div id="buttonContainer">
    <a href="#" class="offscreen-button">
        <span class="button-text">This is the text for the button</span>
        <span class="button-label">:D</span>
    </a>

    <a href="#" class="offscreen-button">
        <span class="button-text">This is the text for another button</span>
        <span class="button-label">:D</span>
    </a>

    <a href="#" class="offscreen-button">
        <span class="button-text">The text here can be any size</span>
        <span class="button-label">:D</span>
    </a>

    <a href="#" class="offscreen-button">
        <span class="button-text">Ranging from 0 to 144 characters</span>
        <span class="button-label">:D</span>
    </a>

    <a href="#" class="offscreen-button">
        <span class="button-text">Thanks in advance</span>
        <span class="button-label">:D</span>
    </a>

    <a href="#" class="offscreen-button">
        <span class="button-text">For the help</span>
        <span class="button-label">:D</span>
    </a>
</div>

CSS

.offscreen-button {
    display:block;
    margin:1px 0px;
}

.button-text, .button-label {
    display:inline-block;
    padding:15px 15px;
}
.button-text {
    background:#333;
    display:none;
}
.button-label {
    background: #E84B3B;
    border-left:6px solid #C0382A;
    margin-left:-4px;
}

ただし、ボタンのテキストはさまざまな長さにすることができます。現在、すべてのボタンは、設定された幅になる buttonContainer と呼ばれる親 div にあります。モバイル デバイスでは、ユーザーが buttonContainer div の任意の場所に触れると、すべてのボタン (ボタン テキストに基づいて動的な幅になります) がスライドして表示され、ユーザーが適切なボタンを選択できるようになるため、それらはこの div にあります。

すべてのボタンを壊さずにスライドさせる最善の方法は何ですか? 私が抱えている問題は、一部のボタンが buttonContainer div に対して広すぎて、次のような状況になってしまうことです: http://jsfiddle.net/CkESR/。

よろしくお願いします。

4

1 に答える 1

1

省略記号でよろしければ、これはいかがですか。

http://jsfiddle.net/CkESR/2/

.button-text {
    max-width:150px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
于 2013-07-25T02:53:17.060 に答える