jquery - 防止 JQuery Mobile 可折叠集 header 被截断

Question

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

例如此处定义的 header :

<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>

...没有效果。

Answer 1

以下是使可折叠集的标题成为多行所需的 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/