如何防止

在超过页面宽度时被剪裁？

我正在使用 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>

无论我做什么，页面看起来都是这样的：

The <p>正在被剪辑。我试着把它包裹在一个<div>，但它保持不变。自从<p>是从外部源提取的，我更喜欢不修改的解决方案<p>或其中的内容。

Jquery Mobile 应用以下内容：

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

如果您覆盖 p 标签的这些样式，您应该能够使其按照您想要的方式换行。使用这些样式覆盖：

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

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