jquery 移动 header 被切断

Question

在 jquery mobile 中，当文本太长时，标题行会被截断，例如在小型设备上，“长文本”可能会变成“a lon...”。

我已经找到了通过设置来防止这种情况的解决方案

body .ui-li .ui-li-desc {
  white-space: normal;
}

但这只是将文本换行到下一行，即使标题行左右有足够的空间(大约只有三分之一的空间留给标题文本)。

在小型设备上，这将导致标题行包含 3 行或更多行，占用屏幕的大部分空间。

是否有一种解决方案可以让标题文本更适合可用的标题行空间？

Answer 1

使用此 css 并设置左右百分比(将 10% 更改为任何其他数字)

.ui-title {
    margin: 0.6em 10% 0.8em !important;
}

如果你想在不同的方面使用不同的值，请使用这个 css:

.ui-title {
    margin: 0.6em 10% 0.8em 5% !important;
}

另外，如果可能的话，给每个标题一个 id，因为提到的 css 将使用 .ui-title 类更改每个元素。

这是一个例子:http://jsfiddle.net/Gajotres/QP9qm/2/