2

我正在使用 JQuery mobile 的可折叠集，当在移动设备上查看时，我的长标题被截断（并且变得不可读）。

例如这里定义的标头：

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h3>My header with lots of text that gets truncated when viewing on mobile device or small screen.</h3>
    <fieldset data-role="controlgroup">
    ...

最终被截断为：我的标题有很多文字......

根据其他帖子的建议，我尝试了：

<style type="text/css">
  .ui-header .ui-title .ui-btn-text .ui-collapsible-heading {
    overflow: visible !important;
    white-space: normal !important;
  }
</style>

……无济于事。

4

1 回答 1

7

这是使可折叠集的标题多行所需的 CSS：

.ui-mobile .ui-page .ui-content .ui-collapsible .ui-collapsible-heading .ui-btn-text {
    white-space : normal;
}​

请注意，我将作为.ui-btn-text元素后代的.ui-collapsible-heading元素作为目标来获得所需的效果。

这制定了一个非常具体的规则，它将覆盖默认的 jQuery Mobile 样式，而无需使用!important.

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

于 2012-04-20T22:05:29.570 回答