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

Question

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

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

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

我希望它看起来像这样:

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

Answer 1

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

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

Answer 2

由于jQuery Mobile的CSS for .ui-header .ui-title,它被截断了,它设置了overflowto hidden,white-spaceto nowrap和text-overflowto ellipsis.

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

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

之前已经问过同样的答案.