Почему текст моего заголовка усекается? - PullRequest
Новая
       1

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

16 голосов
/ 04 января 2012

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

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

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

turncated header

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

full header text

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

Ответы [ 8 ]

39 голосов
/ 16 ноября 2012

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

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}
10 голосов
/ 04 января 2012

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

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

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

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

1 голос
/ 14 августа 2014

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

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

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

1 голос
/ 03 июля 2013

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

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

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

margin:.6em 30% .8em;

и прокомментировать это: 

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

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

1 голос
/ 22 марта 2013

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

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

(Затем центрируйте h1 в соответствии с вашими предпочтениями CSSery.)

0 голосов
/ 16 мая 2016

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

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

0 голосов
/ 22 января 2013

Ваша мета 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

0 голосов
/ 04 января 2012

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

text-overflow: ellipsis;

Удалите это из CSS JqMobile или замените его своим собственным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...