Почему мой текст заголовка усечен?

У меня есть страница, построенная с помощью jQuery mobile с разметкой заголовка, которая выглядит так:

<div data-role="header">
    <h1>The Magnet Puzzle</h1>
</div>

Я тестировал его на Android и Windows-телефоне, и в обоих он обрезает последние три символа текста заголовка, хотя заголовок достаточно широк, чтобы соответствовать всему заголовку:

Я хочу, чтобы это выглядело так:

Почему он усекается и как я могу его исправить, чтобы он отображал весь заголовок?

Ответ 1

Я думаю, что реальная проблема в том, что JqMobile устанавливает левое и правое поле на 30%, оставляя только 40% от общей ширины вашего заголовка. Измените это на 10%, и вы получите эллипсис, когда вам это действительно нужно.

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}

Ответ 2

Он усекается из-за jQuery Mobile CSS для .ui-header .ui-title, который устанавливает overflow в hidden, от white-space до nowrap и text-overflow до ellipsis.

Я не уверен, есть ли лучший способ сделать это, но вы можете переопределить мобильный CSS jQuery так:

.ui-header .ui-title {
  overflow: visible !important;
  white-space: normal !important;
}

Этот вопрос задан ранее с тем же ответом.

Ответ 3

Просто оберните <h1> в <div>:

    <div data-role="header">  
        <div><h1>The Magnet Puzzle</h1></div>  
    </div>

(Затем центрируйте h1 с помощью вашего предпочтительного CSSery.)

Ответ 4

Я пробовал все предлагаемые решения, всегда терпя неудачу.

Я мог бы решить проблему редактирования jquery.mobile-1.3.1.min.css.

Используйте функцию поиска текстового редактора, чтобы найти это:

margin:.6em 30% .8em;

и прокомментируйте это:

/* margin:.6em 30% .8em; */

Отлично работает для меня на jQuery mobile 1.3.1 (конечно, используется локально).

Ответ 5

добавить в свой файл

<style type="text/css">
    .ui-header .ui-title {margin: 0 20%}
</style>

для изменения поля заголовка по умолчанию.

Ответ 6

Это делается с помощью CSS.

text-overflow: ellipsis;

Удалите это из JqMobile CSS или перезапишите его самостоятельно.

Ответ 7

Ваша метатега viewport должна соответствовать экрану устройства. Добавьте в <head>:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, 
target-densitydpi=device-dpi" />

Все подробности и пояснения здесь:

Анатомия мобильной страницы JQuery

Ответ 8

Я знаю, что это мертвая нить, но все же...

Просто используйте <p style="text-align:center"> вместо <h1>, и вы должны быть в порядке (только для диалогов).

<div data-role="header">
    <p style="text-align:center">The Magnet Puzzle</p>
</div>