Word Wrap в Listview в JQuery Mobile

Question

Может кто-нибудь помочь, почему я не могу получить текст для переноса в listview с помощью ui-block, но он отлично работает за пределами списка? Благодарю. Код и скриншот прилагаются.

  <ul id="myDetList" data-role="listview" data-inset="true" style="word-wrap:break-word"> 
      <li style="word-wrap:break-word"> 
       <div class="ui-grid-b"> 
        <div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div> 
        <div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold; word-wrap:break-word">Count the long words in this sentence and tell me how can I wrap these within the ListView.</div> 
        <div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div> 
        <div class="ui-block-a" style="width:5%;"></div> 
        <div class="ui-block-b" style="width:87%;"></div> 
        <div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div> 
        <div class="ui-block-a" style="width:5%;"></div> 
        <div class="ui-block-b" style="width:87%;"></div> 
        <div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div> 
       </div> 
      </li> 
     </ul> 

     <div class="ui-grid-b"> 
      <div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div> 
      <div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold;">Count the long words in this sentence and tell why does it wrap here and not up there?</div> 
      <div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div> 
      <div class="ui-block-a" style="width:5%;"></div> 
      <div class="ui-block-b" style="width:87%;"></div> 
      <div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div> 
      <div class="ui-block-a" style="width:5%;"></div> 
      <div class="ui-block-b" style="width:87%;"></div> 
      <div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div> 
     </div> 

Screen Results in emulator

Answer 1

CSS:

#myDetList>.ui-li-static { 
    white-space: normal !important; 
} 

HTML:

<ul id="myDetList" data-role="listview" data-inset="true"> 
    <li> 
    <div class="ui-grid-b"> 
     <div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div> 
     <div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold;">Count the long words in this sentence and tell me how can I wrap these within the ListView.</div> 
     <div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div> 
     <div class="ui-block-a" style="width:5%;"></div> 
     <div class="ui-block-b" style="width:87%;"></div> 
     <div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div> 
     <div class="ui-block-a" style="width:5%;"></div> 
     <div class="ui-block-b" style="width:87%;"></div> 
     <div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div> 
    </div> 
    </li> 
</ul>