有人可以帮忙为什么我无法使用 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>
模拟器中的屏幕结果
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>