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

【问题标题】：Prevent JQuery Mobile collapsible set header from being truncated防止 JQuery Mobile 可折叠集标头被截断
【发布时间】：2012-04-21 06:07:20
【问题描述】：

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

...无济于事。

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案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/

【讨论】：

仅供参考，这在 Chrome 中效果很好，但似乎不适用于 iPhone 中的 Safari webkit。调查为什么会这样