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;
}

这会将标题置于标题中按钮之后的空间中.这是正常行为的演示,这里是应用上述修复的示例.要查看差异,请调整浏览器/视图的大小.我知道IE 7中不支持display:{table | table-cell}.

Answer 2

stackoverflow 上已经对此进行了讨论。以下链接建议了许多不同的截断长字符串的策略：

用 CSS 截断长字符串：可行吗？