CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-autocomplete
Sandy DeLeon
Sandy DeLeon

Reputation: 662

jQuery autocomplete no word wrap

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.

Upvotes: 5

Views: 5489

Answers (1)

Sam Jones
Sam Jones

Reputation: 4618

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...

Upvotes: 7

Related Questions