Question

我使用jQuery Mobile在iPad应用中本地呈现HTML。即使有很多空间，标题也会在其中加上“......”省略号。我正在使用现成的JQM和JQM CSS类。

如何告诉JQM呈现完整标题？

下面是一个带有蓝色标记的屏幕截图。

这是标题：

`<div data-role='header' data-position='inline'>
       <h1>the long title goes here</h1></div>`

enter image description here

Answer 1

h1标记获得了可以覆盖的边距，因此标题不会被剪裁太多。

.ui-page .ui-header h1 {
    margin-left  : 0;
    margin-right : 0;
}

请注意，您需要提供left / right margin个值，以便您的标题不会与您的图标重叠。

Answer 2

设置溢出：隐藏和文本溢出的组合：省略号是导致覆盖ui-title然后使用边距来尝试和居中的原因。它们可能包括这个，以便在页眉和页脚中为按钮腾出空间。试试这个：

.ui-header .ui-title, .ui-footer .ui-title {
    overflow:visible;
    margin: .6em 20%;
}

JQM 1.1-RC1的默认左右边距设置为30％。只需调整它就可以满足您的需求。

更新：我添加了使用30％默认值的版本。谢谢贾斯珀。

Answer 3

同样重要的是要注意你应该为你的元素添加一个“line-height：”，这样如果它们换行，它们就不会在第2行上相互叠加