防止JQuery Mobile可折叠集标头被截断 [英] Prevent JQuery Mobile collapsible set header from being truncated

问题描述

我使用的是JQuery移动设备的折叠集，而且当在移动设备上查看时，我的长标题标题被截断（并且无法读取）。

I'm using JQuery mobile's collapsible set, and my long header titles are being truncated (and made unreadable) when viewed on mobile devices.

在此定义：

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

结束被截断为：

Ends up being truncated to: My header with lots of text...

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

Following the advice of other posts, I tried:

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

...无效。

推荐答案

这是必要的CSS，使可折叠的多行的标题：

Here is the necessary CSS to make the title of a collapsible set multi-line:

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

注意我的目标是 .ui-btn-文本元素，它是 .ui-collapsible-heading 元素的后代以获得所需效果。

Notice I targeted the .ui-btn-text element that is a descendant of the .ui-collapsible-heading element to get the desired effect.

这使得一个非常具体的规则，将覆盖默认的jQuery Mobile样式，而不需要使用！important 。

This makes a very specific rule that will overwrite the default jQuery Mobile styling without the need to use !important.

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

这篇关于防止JQuery Mobile可折叠集标头被截断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！