jQuery autocomplete no word wrap

Question

I'm using jQuery UI's autocomplete and I've come across and issue that I can't figure out how to fix.

The issue is that when the suggestions are too long they are automatically wrapped to take up multiple lines. I would like to have the suggestions window extend to a max size and not show the overflow. The thing is that I would like for the suggestions to only be displayed in one line. I don't want to set a fixed width for the suggestion box. If the suggestions are shorter in length then my max width I want jQuery UI to set the appropriate width.

Answer 1

I would suggest trying something along the lines of truncating the results and putting the full result text in the hover title text.

You can truncate the result text using css:

.ui-menu-item a
    {
        max-width:100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }  

i've added to rusln's fiddle to demonstrate...