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

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

您可以尝试一些事情。

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

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

另外，如果您使用任何 css 来设置这些标题的样式，请尝试使用百分比和 ems 作为高度。这将确保每个移动浏览器的标题看起来几乎相同（尽管有些确实使它看起来不同，例如Opera 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 mobile，绝大多数手机都不支持（HTC、Blackberry等都有可能遇到这样的小问题）

编辑另外一点：如果您尝试覆盖 JQuery Mobile css 而不是尝试应用您自己的 css，通常效果会更好。我的意思是：

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

.ui-header {
 //CSS
}

通常会比

更好

#header {
  /CSS
}

Answer 3

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

Truncating long strings with CSS: feasible yet?