如何保持这个<p>当它超过页面宽度时被剪裁? [英] How to keep this <p> from getting clipped when it exceeds the width of the page?

问题描述

我正在使用 jQuery Mobile，但我的一个页面出现了问题.

我在列表中嵌入了一个

，如下所示:

<div data-role="header"><h1>第 1 页</h1>
<div data-role="内容"><ul data-role="listview"><li data-role="list-divider">列表标题<li><p>一个很长的段落，<b>应该</b>当它超过可见线的长度时被包裹.</p>

无论我做什么，页面都是这样的:

被剪裁了.我尝试将它包装在 <div> 中，但它保持不变.由于

是从外部来源提取的，我更喜欢不修改

或其内容的解决方案.

解决方案

Jquery Mobile 应用以下内容:

text-overflow: 省略号；溢出:隐藏；空白:nowrap；

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

text-overflow: 省略号；溢出:可见；空白:正常；

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

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

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.

这篇关于如何保持这个<p>当它超过页面宽度时被剪裁?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！