阻止JQuery Mobile可折叠设置标题被截断

我正在使用JQuery mobile的可折叠设置，当在移动设备上查看时，我的长标题标题被截断（并且无法读取）。阻止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>

...无济于事。

来源

2012-04-20 Allyl Isocyanate

这是必要的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/

来源

2012-04-20 22:05:29 Jasper

完美，你摇滚贾斯珀！ – 2012-04-23 01:12:17

仅供参考，这在Chrome中运行良好，但似乎不适用于iPhone中的Safari webkit。调查为什么这是这种情况 – 2012-04-23 15:52:18

你尝试过使用'！important'吗？ – Jasper 2012-04-23 16:16:39

阻止JQuery Mobile可折叠设置标题被截断

回答

相关问题