Question

I want to generate several split buttons using jQuery UI.
The buttons should fill their container up to 100% (the container has a fixed width). If the text of the button is too long I want it to be cut off.

This fiddle demonstrates the problem. Is there any easy solution the button is displayed in one line and the long text is cut off?

The problem seems to be that the span element inside the button tag doesn’t do any line breaking even if its width is set by hand.

Thanks in advance!

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;
}

Demo: http://jsfiddle.net/AlienWebguy/gwSuB/