jQuery Mobile 标题限制答案

【问题标题】：jQuery Mobile title limitjQuery Mobile 标题限制
【发布时间】：2011-03-04 22:27:18
【问题描述】：

jQuery 移动标题的限制是什么？多少个字符？我们如何改变这个限制？使用 jQuery 移动。谢谢。

【问题讨论】：

从source code 判断（假设您指的是对话框），没有硬编码限制。然而，一个标题的长度受到屏幕上可用空间数量的限制是有道理的。
它在我的 iPhone 上被截断了，我想我的问题是如何停止截断。
@cuberds：把你的手机转成横向？
@cuberds：你说的是 jQuery mobile 吗？我认为这仅限于纵向中的前 14 个字符（很可能为导航按钮留出空间）
横向不是一种解决方法。 jquery mobile 不会让文本换行到新行。将文本放在一个容器中，并以一种会导致换行的方式对其进行样式设置。如果你很了解 CSS，应该可以工作。

【解决方案1】：

您可以覆盖 .ui-title 类的左右边距以给自己更多空间，但要小心，因为边距用于确保文本不会干扰您拥有的任何左右按钮在标题中。

.ui-header .ui-title { margin-left: 1em; margin-right: 1em; }

您还可以使用剪辑而不是省略号获得更多空间：

.ui-header .ui-title { text-overflow: clip; }

【讨论】：

【解决方案2】：

如果您担心标题/标题被删减，请查看以下帖子：

【讨论】：

【解决方案3】：

老问题，但谷歌搜索把我带到这里，所以我想我会为其他人发布我的解决方案。

我选择覆盖 CSS 以强制换行，同时为按钮保留空间。我这样做是通过添加

.ui-header .ui-title {
    white-space: normal;
}

到我的CSS。

【讨论】：

【解决方案4】：

我认为不应该有任何限制。您可以转到任意数量的字符。它会根据屏幕尺寸简单地包装它们，并在其前面显示“..”。

【讨论】：

【解决方案5】：

实际上，它不会换行，因为 jQuery Mobile 的 CSS 明确地将空白设置为 nowrap。这加上边距和溢出设置在截断之前为您提供了大约 30-40 个字符的可用空间。

【讨论】：

【解决方案6】：

此外，您可以尝试使用不间断空格：

&nbsp;

【讨论】：

【解决方案7】：

最好的解决方案应该是添加 white-space: normal 到你的文本容器

<div data-role="header">
  <h2 style="white-space: normal">Long text Long text Long text Long text Long text  </h2>
</div>

【讨论】：