jquery - 当这个 <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 足够具体，否则您的覆盖样式将不会被应用。