javascript 为什么我的标题文本被截断？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8718384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my header text being truncated?
提问by Peter Olson
I have a page built with jQuery mobile with header markup that looks like this:
我有一个使用 jQuery Mobile 构建的页面，其标题标记如下所示：
<div data-role="header">
<h1>The Magnet Puzzle</h1>
</div>
I tested it out in an Android and a Windows phone, and in both it truncates the last three characters of the header text, even though the header is wide enough to fit the entire title:
我在 Android 和 Windows 手机上对其进行了测试，在这两种情况下，它都会截断标题文本的最后三个字符，即使标题足够宽以适合整个标题：
I want it to look like this instead:
我希望它看起来像这样：
Why is it being truncated, and how can I fix it so that it displays the entire title?
为什么它会被截断，我该如何修复它以显示整个标题？
回答by bvs
I think the real trouble is that JqMobile is setting the left and right margin to 30% leaving only 40% of the total width for your title. Change that to 10% and you get the ellipsis when you really need it.
我认为真正的麻烦是 JqMobile 将左右边距设置为 30%，只留下标题总宽度的 40%。将其更改为 10%，您会在真正需要时得到省略号。
.ui-header .ui-title {
margin-right: 10%;
margin-left: 10%;
}
回答by Ivan
It's being truncated because of jQuery Mobile's CSS for .ui-header .ui-title, which sets the overflowto hidden, the white-spaceto nowrapand the text-overflowto ellipsis.
它被截断是因为 jQuery Mobile 的 CSS for .ui-header .ui-title，它设置了overflowto hidden、white-spacetonowrap和text-overflowto ellipsis。
I'm not sure if there is a better way to do this, but you can override the jQuery mobile CSS like so:
我不确定是否有更好的方法来做到这一点，但您可以像这样覆盖 jQuery 移动 CSS：
.ui-header .ui-title {
overflow: visible !important;
white-space: normal !important;
}
回答by Seanonymous
Just wrap your <h1>in a <div>:
只需将您的包裹<h1>在一个<div>：
<div data-role="header">
<div><h1>The Magnet Puzzle</h1></div>
</div>
(Then center the h1 with your preferred CSSery.)
（然后将 h1 与您喜欢的 CSSery 居中。）
回答by Pitto
I've tried all the suggested solutions, always failing.
我已经尝试了所有建议的解决方案，但总是失败。
I could solve the problem editing the jquery.mobile-1.3.1.min.css.
我可以解决编辑 jquery.mobile-1.3.1.min.css 的问题。
Use your text editor find function to find this:
使用您的文本编辑器查找功能来查找：
margin:.6em 30% .8em;
and comment it :
并评论它：
/* margin:.6em 30% .8em; */
Worked perfectly for me on jquery mobile 1.3.1 (used locally, of course).
在 jquery mobile 1.3.1 上对我来说效果很好（当然是在本地使用）。
回答by Pascal
add in your file
添加到您的文件中
<style type="text/css">
.ui-header .ui-title {margin: 0 20%}
</style>
to change the default margin of header.
更改标题的默认边距。
回答by AdharSri
I know it's a dead thread but still...
我知道这是一个死线，但仍然......
Just use <p style="text-align:center">instead of <h1>and you should be fine(Only for dialogs).
只需使用<p style="text-align:center">而不是，<h1>你应该没问题（仅适用于对话框）。
<div data-role="header">
<p style="text-align:center">The Magnet Puzzle</p>
</div>
回答by sascha
This is done with CSS.
这是通过 CSS 完成的。
text-overflow: ellipsis;
Remove this from the JqMobile CSS or overwrite it with your own.
从 JqMobile CSS 中删除它或用您自己的覆盖它。
回答by Day
Your viewportmeta must fit with the device screen. Add into the <head>:
您的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" />
All details and explanations here :
所有细节和解释在这里：
