Question

我有一个使用带有标题标记的jQuery mobile构建的页面，如下所示：

<div data-role="header">
    <h1>The Magnet Puzzle</h1>
</div>

我在Android和Windows手机中对其进行了测试，并且在两者中都截断了标题文本的最后三个字符，即使标题宽度足以适合整个标题：

turncated header

我希望它看起来像这样：

full header text

为什么会被截断，我该如何修复它以便显示整个标题？

Answer 1

我认为真正的问题是JqMobile将左右边距设置为30％，只留下标题总宽度的40％。将其更改为10％，并在需要时获得省略号。

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}

Answer 2

由于jQuery Mobile的.ui-header .ui-title CSS被截断，它将overflow设置为hidden，white-space设置为{{} 1}}和nowrap到text-overflow。

我不确定是否有更好的方法可以执行此操作，但您可以像这样覆盖jQuery移动CSS：

ellipsis

This question has been asked before with the same answer.

Answer 3

将<h1>包裹在<div>：

中

    <div data-role="header">  
        <div><h1>The Magnet Puzzle</h1></div>  
    </div>

（然后用你喜欢的CSSery将h1居中。）

Answer 4

我已经尝试了所有建议的解决方案，总是失败。

我可以解决编辑jquery.mobile-1.3.1.min.css。

的问题

使用文本编辑器查找功能查找：

margin:.6em 30% .8em;

并评论它：

/* margin:.6em 30% .8em; */

在jquery mobile 1.3.1上完美地为我工作（当然在本地使用）。

Answer 5

添加您的文件

<style type="text/css">
    .ui-header .ui-title {margin: 0 20%}
</style>

更改标题的默认边距。

Answer 6

这是通过CSS完成的。

text-overflow: ellipsis;

从JqMobile CSS中删除它或用您自己的覆盖它。

Answer 7

您的viewport元数据必须符合设备屏幕。添加到<head>：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, 
target-densitydpi=device-dpi" />

此处的所有细节和解释：

Anatomy of a Jquery Mobile Page

Answer 8

我知道这是一个死路线，但仍然......

只需使用<p style="text-align:center">代替<h1>，您就可以了（仅限对话框）。

<div data-role="header">
    <p style="text-align:center">The Magnet Puzzle</p>
</div>

为什么我的标题文本被截断？

8 个答案: