jQuery Mobile - Панель инструментов Эллипсис в iPad

Question

Я визуализирую HTML локально в приложении для iPad, используя jQuery Mobile.В заголовках появляются "..." эллипсы, хотя места много.Я использую готовые классы JQM и JQM CSS.

Как я могу сказать JQM отображать полный заголовок?

Ниже приведен снимок экрана с некоторой синей разметкой.

Вот заголовок:

`<div data-role='header' data-position='inline'>
       <h1>the long title goes here</h1></div>`

Answer 1

Комбинация настроек переполнения: скрытый и переполнение текста: многоточие - вот что заставляет Override ui-title затем играть с полем, чтобы попытаться отцентрировать.Они, вероятно, включают это, чтобы освободить место для кнопок в верхнем и нижнем колонтитулах.Попробуйте это:

.ui-header .ui-title, .ui-footer .ui-title {
    overflow:visible;
    margin: .6em 20%;
}

По умолчанию для левого и правого полей JQM 1.1-RC1 по умолчанию установлено значение 30%.Просто настройте его так, чтобы он соответствовал вашим потребностям.

ОБНОВЛЕНИЕ: Я добавил версию, которая использовала 30% по умолчанию.Спасибо Джаспер.

Answer 2

Также важно отметить, что вы должны добавить «line-height:» к вашим элементам, чтобы в случае их переноса они не соприкасались друг с другом в строке 2

Answer 3

Тег h1 применяет маржу, которую вы можете перезаписать, чтобы заголовок не слишком сильно обрезался.

.ui-page .ui-header h1 {
    margin-left  : 0;
    margin-right : 0;
}​

Вот демонстрационная версия: http://jsfiddle.net/ubYWU/

Примечаниечто вы захотите указать значения left / right margin, чтобы ваш заголовок не перекрывался с вашими значками.