在jQuery的移動列表視圖中的自動換行

有人可以幫助我爲什麼不能使用ui-block在列表視圖中包裝文本，但它在列表視圖外工作正常嗎？謝謝。附上代碼和屏幕截圖。在jQuery的移動列表視圖中的自動換行

  <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

來源

2017-01-17 TO15108

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>

來源

2017-01-18 06:49:27 deblocker

在jQuery的移動列表視圖中的自動換行

回答

相關問題