3

I'm currently building a web application that has a list of buttons on the right side. The buttons, when completely visible, have two parts and look something like this: http://jsfiddle.net/CFYRC/.

However, initially, the buttons all appear hidden so only the label portion shows up (the button text section is invisible, and the button labels are all aligned to the left of the page). When a user hovers over the label, the button slides out and shows the text for that button.

Note: The code below is the same as the 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;
}

However, the button text can be varying length. Currently, all of the buttons are in a parent div called buttonContainer that will be a set width. They are in this div because on mobile devices, when a user touches anywhere in the buttonContainer div, all of the buttons (which will be dynamic width based on the button text) will slide out so that the user can select the appropriate button.

What would the best way to have all of the buttons slide out without breaking? The problem I'm having is that some of the buttons end up being too wide for the buttonContainer div, and end up with a situation that looks like this: http://jsfiddle.net/CkESR/.

Thanks in advance for your help!

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 回答