Wrap text in list items/buttons instead of hiding the overflow

I'm trying to override the default behavior of list items and buttons in jQuery Mobile, which has text which doesn't fit on one line as hidden overflow.

If you view this on a skinny browser window or iPhone you'll see what I mean: http://m.gizmag.com

I'd like to be able to wrap the text in the h3 and p tags of each list item o开发者_开发知识库nto new lines.

Thanks in advance!

Try setting a style of white-space:normal for the elements.

I just did this with an anchor (<a>) element inside a jQuery Mobile listview-styled li, and it worked to wrap the text as I expected. I used Chrome's developer tools to determine where the CSS attributes were coming from and interactively changed them to make it work the way I wanted.

-- Derek

If feasible, enclosing it inside a <div> will also make it wrap. (But finding the affected element and declaring white-space:normal is the more proper solution)

Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this