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中，因为在移动设备上，当用户触摸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;
}

屏幕外隐藏按钮的最佳方法

1 个答案: