javascript - 在屏幕外隐藏按钮的最佳方式

Question

我目前正在构建一个右侧有按钮列表的 Web 应用程序。这些按钮在完全可见时分为两部分，看起来像这样: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 中，该 div 将具有设定的宽度。它们位于此 div 中，因为在移动设备上，当用户触摸 buttonContainer div 中的任何位置时，所有按钮(根据按钮文本的动态宽度)都会滑出，以便用户可以选择适当的按钮。

让所有按钮滑出而不损坏的最佳方法是什么？我遇到的问题是某些按钮对于 buttonContainer div 来说太宽了，最终出现如下情况:http://jsfiddle.net/CkESR/ .

预先感谢您的帮助!

Answer 1

如果您可以使用省略号，那么这个怎么样？

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

.button-text {
    max-width:150px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}