Question

I am using jquerymobile to create list with thumbnails. It looks like this:

<ul>
   <li>
      <h3>Heading</h3>
      <p>Long thumbnail which I want to be divided into 2 lines and not just simply cut with ... ending</p>
   </li>
</ul>

If I look at it inside browser it all works great but when I load it into mobile (which has of course smaller screen) my thumbnail gets cut. So it is not looking like this Long thumbnail which … . But I want to show whole thumbnail and divide it into two or more lines. Is there a way to do this?

I also have this code inside

:

<p class="ui-li-aside"> Date or some text</p>

it is showing date on the right side of

. Again, at web browser it looks great but at mobile it just simply cuts my so it look like Headi…. So is there a way to put ui-li-aside on the bottom of li so it will be organized as this

HEADING 3
Thumbnail first line (probably divided into two lines)
Thumbnail Second line (if first line is not enough)
                                                       ul-li-aside(actual date)

Right now it looks like this (on my mobile):

HEADI....       ul-li-aside(actual date)
Thumbnail firs....

Answer 1

You may try to include style="white-space: normal;" in the tags where you want to display the entire text.

So you would have:

<ul>
    <li>
        <h3 style="white-space: normal;">Heading</h3>
        <p style="white-space: normal;">Long thumbnail which I want to be divided into 2 lines and not just simply cut with ... ending</p>
    </li>
</ul>

PS: To include white-space: normal, use the style attribute in tags, and not the class, because it may not work since the class is often overriden by jQuery Mobile.

Hope this helps. Let me know if this works for you.