jQuery mobile:在 ListViews 中启用自动换行 [英] jQuery mobile: Enable Word Wrap in ListViews

问题描述

我有一个列表视图(见下图)，我想对所有内容进行自动换行，而不是将 ... 添加到长行中.

I have a listview (see photo below) that I would like to word wrap all the contents instead of adding ... to the long lines.

这是怎么做到的?

推荐答案

您只需要更新 .ui-li-desc 元素的 CSS，该元素包含列表项中的文本:

You just need to update the CSS for the .ui-li-desc element that holds the text in your list-item:

​.ui-page .ui-content .ui-listview .ui-li-desc {
    white-space : normal;
}​

这是一个演示:http://jsfiddle.net/Xc6PJ/

white-space 的一些不错的文档:https://developer.mozilla.org/en/CSS/white-space

这是我的测试 listview 在 jQuery Mobile 初始化后的示例列表项:

Here is a sample list-item from my test listview after jQuery Mobile has initialized it:

<li class="ui-li ui-li-static ui-body-c">
    <h3 class="ui-li-heading">Sample Title</h3>
    <p class="ui-li-desc">
        Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content
    </p>
</li>

这篇关于jQuery mobile:在 ListViews 中启用自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！