开发者

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

开发者 https://www.devze.com 2023-02-28 19:15 出处:网络
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:

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>开发者_Python百科; 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:

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

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.


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.


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


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

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

0

精彩评论

暂无评论...
验证码 换一张
取 消