在Jquery Mobile的Listview中自动换行

Can someone help why I cannot get text to wrap within a listview with ui-block but it works fine outside of the listview? Thanks. Code and screen shot attached.

有人可以帮助我为什么不能用ui-block将文本包装在listview中，但它在listview之外工作正常吗？谢谢。附加代码和屏幕截图。

           <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

屏幕结果模拟器中

1 个解决方案

#1

CSS:

CSS：

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

HTML:

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>

#1