Question

我刚刚开始使用jquery移动应用程序，并且在使用链接时遇到标题栏问题。

  <header data-role="header" data-position="fixed">
    <a href="blah" data-icon="back">this is long text</a>
    <h1>page title</h1>
  </header>

问题是，如果其中一个或两个有点长，后面的链接通常会与标题重叠。这显然只发生在具有较小屏幕（与iPad相比）的移动设备上的视图或当我缩小测试浏览器时。但是在更广泛的浏览器上测试它看起来不错。有没有内置的jquery方法来使这项工作？通过缩小文本大小或根据宽度自动截断文本？我可以自己截断文本，但是当在更广泛的浏览器（或横向模式）中查看时它看起来很傻，并且链接被无缘无故地截断。

任何帮助都会很棒。谢谢！

更新：

您可以转到http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-headers.html

进行测试

使用firebug / inspector使任何工具栏链接中的文本更长，并在浏览器宽度较小时观察它们与标题重叠。

Answer 1

我也遇到过长标题和按钮碰撞的问题。默认情况下，标题以标题的整个宽度为中心，按钮绝对位于两侧。

我解决这个问题的方法是在jQuery Mobile之后加载的样式表中对CSS进行以下调整：

.ui-header { 
    display: table;
    width: 100%;
}

.ui-header .ui-title {
    display: table-cell; 
    width: 100%;
    line-height: 2.5em;
}

.ui-header .ui-btn { 
    display: table-cell; 
}

.ui-header .ui-btn-left, .ui-header .ui-btn-right {
    position: static;
    top: 0;
}

这使标题在标题中的按钮之后居中。 Here's a demonstration of the normal behavior和here's an example with the above fix applied。要查看差异，请调整浏览器/视图的大小。我知道IE 7中不支持display：{table | table-cell}。

Answer 2

这已在stackoverflow上讨论过。以下链接提示了截断长字符串的许多不同策略：

Truncating long strings with CSS: feasible yet?

Answer 3

你可以尝试一些事情。

 <header data-role="header" data-position="fixed">

“header”和“data-role =”标题“”可能相互冲突。尝试将其设为div

此外，如果您使用任何CSS来设置这些标题的样式，请尝试使用百分比和ems作为高度。这将确保每个移动浏览器的标题看起来几乎相同（尽管有些标题看起来不同，例如歌剧mobi）

以下是一个例子：

.ui-header .ui-title, .ui-footer .ui-title {
    display: block;
    font-size: 1em; //Font size is a height, use ems
    margin: 0.6em 90px 0.8em;
    outline: 0 none !important;
    width: 50%; //For widths use %
}

如果不起作用，请尝试为标题中的每个元素指定一个特定的height。对于某些手机（特别是iPhone），如果未指定特定高度，这些div将重叠或被切断。

<a href="blah" data-icon="back" id = "link">this is long text</a>
<h1>page title</h1>

#link
{
   height: 10px; //(Or you can use ems, but this may not be needed)
}

如果这不能解决问题，那么您可能只需要减小字体大小。这是移动电话的问题，尤其是JQuery移动电话，它不支持绝大多数手机（HTC，Blackberry等都有一些你可能会遇到的小问题）

编辑还有一个注意事项：如果您尝试覆盖JQuery Mobile css而不是尝试应用自己的css，通常效果会更好。我的意思是：

<header data-role="header" data-position="fixed" id ="header">

.ui-header {
 //CSS
}

通常比

效果更好

#header {
  /CSS
}

Jquery移动标题链接与长文本重叠

3 个答案: