不再为 jQuery Mobile 可折叠内容缩短标题？答案

【问题标题】：Stop heading being shortened for jQuery Mobile collapsible content?不再为 jQuery Mobile 可折叠内容缩短标题？
【发布时间】：2012-11-29 20:04:12
【问题描述】：

我有以下 jQuery Mobile 的可折叠内容。如何停止缩短标题？

目前文本被截断，因此它显示为“非常长的标题...”我需要使用 css 手动执行此操作还是可以更改 JQB 设置？

    <div data-role="collapsible">
        <h4>
            Really long heading goes here thats wider than the page width
        </h4>
        <p>
            Content Content Content Content Content Content 
        </p>
    </div>

这是文档 http://jquerymobile.com/test/docs/content/content-collapsible.html

似乎是这个 CSS 导致了这种行为。如果没有执行此操作的标准 JQM 方法，我可以覆盖此规则。

.ui-btn-inner { 空白：nowrap； }

【问题讨论】：

您是否尝试过this website 上的建议：将<h4> 包装在<div> 标签内？

标签： jquery-mobile

【解决方案1】：

你需要删除这个css：

white-space: nowrap;

从它的内部跨度（跨度女巫包装的文本）。或者替换为：

white-space: normal;

或更改 jQM css 文件 (.ui-btn-inner)，但这也会影响使用此类的所有其他元素。

或者使用这一行：

$('div[data-role="collapsible"] h4 a span span.ui-btn-text').css({'white-space':'normal'});

没有其他办法，或者至少不买改变一些jQM UI元素属性。

【讨论】：