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

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

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

磁铁之谜

我在Android和Windows phone上对其进行了测试，在这两种情况下，它都会截断标题文本的最后三个字符，即使标题宽度足以容纳整个标题：

我希望它看起来像这样：

---

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

之所以会被截断，是因为jQuery Mobile的CSS用于

.ui header.ui title

，它将

溢出设置为
隐藏，
空白
至
nowrap
和
文本溢出
至
省略号

我不确定是否有更好的方法来实现这一点，但您可以像这样覆盖jQuery mobile CSS：

.ui-header .ui-title {
  overflow: visible !important;
  white-space: normal !important;
}

这是通过CSS完成的

text-overflow: ellipsis;

将其从JqMobile CSS中删除或用您自己的CSS覆盖。
我认为真正的问题在于JqMobile将左右边距设置为30%，只留下标题总宽度的40%。将其更改为10%，您将在真正需要时获得省略号

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

您的
视口
元必须与设备屏幕相匹配。添加到
中：

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



所有详细信息和说明如下：

只需将您的
包装在
中：


磁铁之谜

（然后用您喜欢的CSSery将h1居中。）
我尝试了所有建议的解决方案，但总是失败

我可以解决编辑jquery.mobile-1.3.1.min.css的问题

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

margin:.6em 30% .8em;

并发表评论：

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

在jquerymobile1.3.1（当然是本地使用的）上对我非常有效。
添加您的文件

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


.ui头.ui标题{边距：0 20%}

更改页眉的默认边距。
我知道这是一个死线程，但仍然

只需使用
而不是
，就可以了（仅适用于对话框）


磁铁拼图

您确定页眉足够宽吗。您是否检查了：
宽度
、
边距
和
填充
？@PeeHaa查看标题条。看文本的宽度。你觉得它比页眉宽吗？通过看一些图片，很难看到
填充
：PI希望我不必像这样做that@PeterOlson：我用一个链接更新了我的答案，该链接指向之前关于jQuery手机标题的问题。对不起，但是标准布局包括DIV+H1包装，它会截断。这是赢的“.ui header.ui title{margin right:10%；margin left:10%；}”样式覆盖。他们为什么要将默认的边距设置为30%？
<style type="text/css">
    .ui-header .ui-title {margin: 0 20%}
</style>

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