How to break lines of HTML based on screen size

I have a PhoneGap app that displays an unordered list utilizing jQuery mobile's layout. When you view the app on a smaller screen, the text overlaps and you can't read it anymore. I can't figure out how to have the line "break" so that it appears as two lines when the screen size is reduced, and one line when it is not reduced.

Full screen

Reduced screen

On the second line the text disappears, and is "hidden" by the numerical values. The code of that chunk looks like this:

HTML:

<div data-role="content">
        <ul data-role="listview" data-divider-theme="a">
            <li data-role="list-divider"></li>

            <li><b>Revenues</b></li>
            <li>Gross Sales<span class="right">$543,600</span></li>
            <li>Less Sales Returned and Allowances<span class="right">$9,200</span></li>
            <li>Less Sales Discounts<span class="right">$5,100</span></li>

(continues on)

CSS:

span.right {
  float: right;
}

so you can use

white-space: normal !important;

I was using white-space: normal; without the !important tag it does not become "wrap text" with JQuery mobile.