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

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

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

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

我希望它看起来像这样：

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

我认为真正的问题是 JqMobile 将左右边距设置为 30%，只留下标题总宽度的 40%。将其更改为 10%，当您真正需要时就会得到省略号。

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