在 jQuery Mobile 中，如何阻止列表项被省略号截断？答案

【问题标题】：In jQuery Mobile, how do I stop list items being cut off with ellipses?在 jQuery Mobile 中，如何阻止列表项被省略号截断？
【发布时间】：2014-01-04 02:57:58
【问题描述】：

我有这个清单：

<ul id="linksList"
    data-role="listview"
    data-inset="true"
    data-filter="true">
    <!-- Dynamic contents! -->
</ul>

它从本地 XML 文件（RSS 提要）获取数据。我想要的只是标题要么折叠起来，要么在按钮中显示更多标题，因为我可能剩下三分之二的按钮来填充文本。

Screenshot Link

感谢您的帮助！

【问题讨论】：

你还想要什么？我会用它编辑
从头开始重建问题所需的一切。如果你能在 jsfiddle 上产生一个工作问题，那就最好了。
这个问题是一个相当常见的问题，jQuery Mobile 的基础 CSS 将列表项强加到溢出到椭圆中。我已经用关于该主题的更多信息编辑了 OP，但在 Firebug 中的快速测试表明我下面的解决方案应该可以解决问题。
嗨，戴夫，老实说，我是个新手。将您的修复程序放入 css 文件时，我将如何引用我的列表？即我会只使用id吗？据我所知，jqms 列表视图等有特殊标识符

标签： javascript jquery css jquery-mobile

【解决方案1】：

您需要覆盖 jQuery Mobile 默认显示省略号为您想要的元素换行：

overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;

变成：

overflow: visible;
text-overflow: clip;
white-space: normal;

我建议根据需要使用您自己的类来执行此操作，而不是修改基本代码。

【讨论】：

嗨，戴夫，老实说，我是个新手。将您的修复程序放入 css 文件时，我将如何引用我的列表？即我会只使用id吗？据我所知，jqms 列表视图等有特殊标识符
another SE topic 上有一个代码 sn-p，您可以将其用作列表中的一个类，以使其消除省略号。我认为用户的代码 sn-p 将比我目前提供的任何建议更有效。
似乎无论我做什么都不会影响我拥有的任何一个列表视图。我已经尝试过您建议的其他主题链接也没有影响任何一个列表。我的样式表是在 jqm 之后链接的，如果它是本地副本上的 CDN 会很重要吗？如果它是缩略图列表视图，这有关系吗？

【解决方案2】：

我不必更改文本溢出。也..我添加了类名。复制并粘贴以下内容：

.ui-li-heading, .ui-li-desc { 
  overflow: visible; 
  white-space: normal; 
}

【讨论】：

【解决方案3】：

省略号是由 jQuery mobile 设置宽度和将溢出设置为省略号引起的。您需要进入项目的 CSS 并设置边距以使用更少的空间。

【讨论】：