JQuery для переноса слов в тегах <h *>

Question

У меня есть следующий мобильный код jquery:

<div data-role="collapsible">
<h3>I like to read a lot but sometimes I simply can't bring myself to do it</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis interdum felis, et tempor nunc commodo sit amet. Ut fringilla.  
</p></div>

Мне нужен тег h3 для переноса слов, а не усечения, как это делает jquery mobile по умолчанию.

Я пытался изменить вышеуказанный тег h3 на:

<h3 style="white-space:normal;">

или добавление следующего к таблице стилей

h3  { white-space:normal; }

или

.h3  { white-space:normal; }

Ничего из этого не работает ... есть идеи? Я мог бы обернуть это с разрывами строки, но это не хорошо, поскольку это выглядит уродливо, если кто-то меняет ориентацию своего телефона.

Спасибо

Даррен

Answer 1

У вас была правильная идея.JQM просто делает забавную разметку, и в конце вы нацелились не на то.

 .ui-collapsible h3 .ui-btn-text{white-space:normal;}