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

我用jQuery移动与头标记，看起来像这样建立了一个网页：为什么我的标题文字被截断？

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

我测试了它在Android和Windows Phone和两个截断它的标题文本的最后三个字符，即使头是足够宽，以适应整个标题：

turncated header

我希望它看起来像这个：

full header text

为什么被截断了，我怎么能解决这个问题，以便它显示了整个标题？

来源

2012-01-03 Peter Olson

你确定标题是足够宽。你是否检查过：'width'，'margin'和'padding'？ – PeeHaa 2012-01-03 20:54:28

@PeeHaa看看标题栏。看看文字的宽度。它看起来比标题更宽吗？ – 2012-01-03 20:58:22

通过查看图像很难看到'padding'：P – PeeHaa 2012-01-03 21:03:24

我认为真正的麻烦在于JqMobile将左右边距设置为30％，只剩下标题总宽度的40％。把它改成10％，当你真的需要的时候你会得到省略号。

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

来源

2012-11-16 17:09:09 bvs

不适合我 – Pitto 2013-07-03 16:04:23

谢谢，投票！ – Thomas 2013-07-12 15:02:07

他们为什么会将默认边距设置为30％？ – marcovtwout 2015-07-17 14:33:20

它被截断因为jQuery Mobile的CSS为.ui-header .ui-title，这台overflow到hidden的white-space到nowrap和text-overflow到ellipsis的。

我不知道是否有更好的方式来做到这一点，但是你可以重写jQuery Mobile的CSS像这样：

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

This question has been asked before with the same answer.

来源

2012-01-03 20:56:04 Ivan

我希望我不必那样做 – 2012-01-03 20:57:35

@PeterOlson：我更新了我的答案，并提供了一个关于jQuery Mobile标题的链接。 – Ivan 2012-01-03 21:01:05

这是用CSS来完成。

text-overflow: ellipsis;

从JqMobile CSS删除此或用自己的覆盖。

来源

2012-01-03 20:57:15 sascha

您的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

来源

2013-01-21 22:36:30 Day

只是包装你的<h1>在<div>：

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

（然后用您的首选居中H1 CSSery）

来源

2013-03-21 23:26:32 Seanonymous

对不起，但标准布局包括DIV + H1环绕和它截断。这是“.ui-header .ui-title {margin-right：10％; margin-left：10％;}”样式。 – 2015-07-03 19:51:56

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

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

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

margin:.6em 30% .8em;

和评论吧：

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

完全为我工作的jQuery Mobile的1.3.1（本地使用，当然）。

来源

2013-07-03 16:32:42 Pitto

添加在您的文件

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

更改标题的默认保证金。

来源

2014-08-14 09:32:52 Pascal

我知道这是一个死线程但仍...

只需使用<p style="text-align:center">而不是<h1>，你应该罚款（仅适用于对话框）。

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

来源

2016-05-16 11:04:37 AdharSri

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

回答

相关问题