I'm working with jQuery Mobile and one of my pages is giving me problems.

I have a `<p>` embedded in a list like so:

```
<div data-role="page">

    <div data-role="header">
        <h1>Page 1</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview">
            <li data-role="list-divider">
                List Heading
            </li>
            <li>
                <p>A very long paragraph that <b>should</b> be wrapped when it exceeds the length of the visible line.</p>
            </li>
        </ul>
    </div>

</div>

```

No matter what I do, the page looks something like this:

![enter image description here](https://i.stack.imgur.com/itrH0.jpg)

The `<p>` is getting clipped. I tried wrapping it in a `<div>`, but it remains the same. Since the `<p>` is pulled from an external source, I would prefer solutions that don't modify the `<p>` or the contents of it.