How to keep this <p> from getting clipped when it exceeds the width of the page?

Question

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:

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.

Answer 1

Jquery Mobile applies the following:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

If you override these styles for the p tag, you should be able to get it to wrap like you want it to. Override with these styles:

text-overflow: ellipsis;
overflow: visible;
white-space: normal;

Make sure your css is specific enough or your override styles will not be applied.

Answer 2

I went a step further and made a custom class for inhibiting the ellipses. Here's the code:

.no-ellipses,
.no-ellipses .ui-header .ui-title, 
.no-ellipses .ui-footer .ui-title,
.no-ellipses .ui-btn-inner,
.no-ellipses .ui-select .ui-btn-text,
.no-ellipses .ui-li .ui-btn-text a.ui-link-inherit,
.no-ellipses .ui-li-heading,
.no-ellipses .ui-li-desc {text-overflow:ellipsis;overflow:visible;white-space:normal;}

Basically this overrides all the situations where the rule exists in jQuery Mobile's css. This assumes the no-ellipses class is on a parent element to any of the rules in jQuery Mobile's stylesheet. :)