防止JQuery Mobile可折叠集头被截断

Question

我正在使用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>

......无济于事

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/