jQuery mobile wordwrap внутри тегов

#css #jquery-mobile

#css #jquery-мобильный

Вопрос:

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

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

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

Спасибо

Даррен

Ответ №1:

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

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

Комментарии:

1. Используя .ui-btn, замените .ui-btn-text на новую версию