2017-01-17 1 views
0

누군가가 ui-block으로 목록보기 내에서 텍스트를 감쌀 수없는 이유를 도울 수 있지만 목록보기 외부에서 제대로 작동합니까? 감사. 코드 및 스크린 샷이 첨부되었습니다.Jquery Mobile의 목록보기에서 단어 줄 바꿈

  <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

답변

0

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>