Как сохранить этот <p>от обрезки, когда он превышает ширину страницы?

Я работаю с 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> или его содержимое.

Ответы

Ответ 1

JQuery Mobile применяет следующее:

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

Если вы переопределите эти стили для тега p, вы сможете заставить его обернуть, как вы этого хотите. Переопределите эти стили:

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

Убедитесь, что ваш css достаточно конкретный или ваши стили переопределения не будут применяться.

Ответ 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

Вы можете обернуть то, что находится между тегами <p> с помощью <div>

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