Question

我正在使用JQuery移动设备的可折叠套装，在移动设备上查看时，我的长标题标题会被截断（并且无法读取）。

例如，此处定义的标题：

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

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

1 个答案: