Question

我想使用jQuery UI生成多个split buttons。按钮应将容器填充至100％（容器具有固定宽度）。如果按钮的文字太长，我希望它被切断。

This fiddle演示了这个问题。是否有任何简单的解决方案，按钮显示在一行中，长文本被截断？

问题似乎是按钮标记内的 span 元素即使其宽度是手动设置也不会进行任何换行。

提前致谢！

Answer 1

button {
    overflow:hidden;
    white-space:nowrap;
}
#buttons {
    white-space:nowrap;
}
.ui-button-text {
    max-width:60px; /* Adjust this to make wider/narrower */
    overflow:hidden;
}

演示：http://jsfiddle.net/AlienWebguy/gwSuB/

Answer 2

这会有用吗？

<div style="width:100px;overflow-x: hidden">

<div id="buttons">

<button id="btn1" style="white-space: nowrap">very very very very long text</button>

<button id="btn2">delete</button>

</div> </div>

Answer 3

你有100px宽div内的按钮。这有必要吗？见这里：

http://jsfiddle.net/mBjst/12/

Answer 4

检查这个小提琴：http://jsfiddle.net/ncguN/

仅供参考，解决方案中最重要的CSS样式是：

white-space: nowrap;
overflow: hidden;

如何防止按钮内的SPAN标记断行（jQuery UI按钮）

4 个答案: