当它超过页面宽度时，如何防止这个 <p> 被剪裁？答案

【问题标题】：How to keep this <p> from getting clipped when it exceeds the width of the page?当它超过页面宽度时，如何防止这个 <p> 被剪裁？
【发布时间】：2011-08-13 14:05:06
【问题描述】：

我正在使用 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> 或其内容的解决方案。

【问题讨论】：

标签： jquery html jquery-mobile

【解决方案1】：

Jquery Mobile 应用以下内容：

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

如果你为 p 标签覆盖这些样式，你应该能够让它像你想要的那样换行。用这些样式覆盖：

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

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

【讨论】：

哦，没关系。我明白了 - 我使用的是 whitespace 而不是 white-space。

【解决方案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 样式表中任何规则的父元素上。 :)

【讨论】：

【解决方案3】：

您可以用<div> 包装<p> 标签之间的内容

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

【讨论】：