CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Nathan Osman
Nathan Osman

Reputation: 73275

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

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

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.

Upvotes: 11

Views: 7807

Answers (3)

Ben Jaffe
Ben Jaffe

Reputation: 111

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. :)

Upvotes: 8

Phill Pafford
Phill Pafford

Reputation: 85368

You could wrap what is between the <p> tags with a <div>

http://jsfiddle.net/DNRGn/3/

Upvotes: 0

Jeremy Seekamp
Jeremy Seekamp

Reputation: 2796

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.

Upvotes: 17

Related Questions