I’ve been doing some development in jQuery Mobile, and though it’s still in Alpha, it’s a great library. That said, there are still some serious bugs in it and some other less than ideal things happening. In any case, working with jQuery Mobile has certainly helped my debugging skills along. 🙂 One of the toughest issues that almost had me pulling out my hair was figuring out how to wrap text in a jQuery Mobile list. Read on for the fix.
I had a list that was being styled very nicely by jQuery Mobile, but I needed the text to wrap. This will typically not be a problem if the site is viewed on a web browser, but on smaller screen and particularly mobile phones, the text would just continue on and on (past the screen) without wrapping onto the next line. I opened my trusty inspector and was able to identify the CSS fix that would cause the text to wrap.
The Fix
Simply apply a “white-space: normal” style to the anchor <a> tag in the list item. This will apply the proper styling to cause your text to wrap at all screen resolutions.
[Edit – 2014-02-02]: I wrote this quick post long ago on my old blog located at djchoi.com, and I’ve been surprised at the traffic it’s received over the years, indicating that this fix is still relevant in the latest stable release of the jQuery Mobile framework. Cool stuff. I’ve also since been informed that O’Reilly’s jQuery Mobile book indicates that the following line could be added to your CSS to address this issue wholesale.
[syntax type=”html|php|js|css”].ui-li .ui-btn-text a.ui-link-inherit { white-space: normal; }[/syntax]
