自动换行jquery listview项

Question

我有一个包含将近100个字符的项目的Listview，但是我需要显示全文，我该怎么做呢？

        <ul data-role="listview" data-filter="true" data-inset="true">
            <li data-filtertext="Hola" data-theme="b"><a href="" >Hola</a></li>
            <li data-filtertext="mundo"><a href="" >mundomundomundomundomundo mundo mundomundomundomundomundo  mundomundomundo  mundomundomundo mundomundomundomundomundomundomundo mundomundomundo</a></li>
            <li data-filtertext="hello"><a href="" >hello</a></li>
            <li data-filtertext="world"><a href="" >world</a></li>
        </ul>

JSFiddle Code

Answer 1

可以只使用modify white-space属性

例如

<ul data-role="listview" data-filter="true" data-inset="true">
        <li data-filtertext="Hola" data-theme="b"><a href="" >Hola</a></li>
        <li data-filtertext="mundo"><a style="white-space: pre-wrap;" href="" >mundomundomundomundomundo mundo mundomundomundomundomundo  mundomundomundo  mundomundomundo mundomundomundomundomundomundomundo mundomundomundo</a></li>
        <li data-filtertext="hello"><a href="" >hello</a></li>
        <li data-filtertext="world"><a href="" >world</a></li>
    </ul>

当然，避免使用内联样式可能会更好，而且只需将一个类添加到您想要自定义样式的列表项目中可能会更好。

Answer 2

您需要从规则.ui-li .ui-btn-text a.ui-link-inherit和.ui-btn-inner中删除white-space :nowrap

或使用white-space:normal!important;覆盖它

不确定这是否会导致副作用，尽管在更大的应用程序中..

在http://jsfiddle.net/gaby/eFvzC/1/上演示

如果想要避免内联样式，可以根据data-filtertext值直接定位元素(对于现代浏览器)

.ui-li[data-filtertext="mundo"] .ui-btn-text a.ui-link-inherit{
   white-space:normal!important;
}