当超出页面宽度时如何防止<p>被剪裁？

Question

我正在使用jQuery Mobile,我的一个页面给了我一些问题.

我有一个<p>嵌入在这样的列表中:

<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>

无论我做什么,页面看起来像这样:

该<p>是越来越裁剪.我尝试用它包装它<div>,但它仍然是一样的.由于<p>是从外部源中提取的,我更倾向于不修改它<p>或其内容的解决方案.

Answer 1

Jquery Mobile适用以下内容:

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

如果你为p标签覆盖这些样式,你应该能够像你想要的那样包装它.用这些样式覆盖:

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

确保您的css足够具体,否则您的覆盖样式将不会应用.

Answer 2

我更进了一步,制作了一个用于抑制省略号的自定义类.这是代码:

.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;}

基本上这会覆盖jQuery Mobile的css中存在规则的所有情况.这假设no-ellipses类位于jQuery Mobile样式表中任何规则的父元素上.:)