Как уберечь эту <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 достаточно конкретен, иначе стили переопределения не будут применены.

Answer 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;}

В основном это отменяет все ситуации, когда правило существует в CSS jQuery Mobile. Это предполагает, что класс no-ellipses находится в родительском элементе любого из правил в таблице стилей jQuery Mobile. :)

Answer 3

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

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