Pourquoi mon texte d'en-tête tronqué?
J'ai une page construite avec jQuery mobile avec en-tête du code qui ressemble à ceci:
<div data-role="header">
<h1>The Magnet Puzzle</h1>
</div>
Je l'ai testé dans un Android et Windows phone, et dans les deux il tronque les trois derniers caractères du texte d'en-tête, même si l'en-tête est assez large pour le titre complet:
Je veux qu'elle ressemble à ceci à la place:
Pourquoi est-il tronqué, et comment puis-je résoudre ce problème afin qu'il n'affiche que le titre complet?
Êtes-vous sûr de l'en-tête est assez large. Avez-vous vérifié le:
Regardez la tête de la bande. Regardez la largeur du texte. Est-il plus large que l'en-tête pour vous?
il est assez difficile de voir
width
, margin
et padding
?Regardez la tête de la bande. Regardez la largeur du texte. Est-il plus large que l'en-tête pour vous?
il est assez difficile de voir
padding
en regardant l'image 😛OriginalL'auteur Peter Olson | 2012-01-03
Vous devez vous connecter pour publier un commentaire.
Je pense que le vrai problème, c'est que JqMobile est le réglage de la marge de gauche et droite à 30%, laissant seulement 40% de la largeur totale de votre titre. Changement de 10% et vous obtiendrez les points de suspension quand vous en avez vraiment besoin.
Merci, a voté!
Pourquoi auraient-ils définir les marges par défaut à 30%?
OriginalL'auteur bvs
Il est tronqué à cause de jQuery Mobile CSS pour
.ui-header .ui-title
, qui définit laoverflow
àhidden
, lewhite-space
ànowrap
et latext-overflow
àellipsis
.Je ne suis pas sûr si il ya une meilleure façon de le faire, mais vous pouvez remplacer le jQuery mobile CSS comme ceci:
Cette question a été posée avec la même réponse.
J'ai mis à jour ma réponse avec un lien à une précédente question concernant le jQuery Mobile titre.
OriginalL'auteur Ivan
Juste envelopper de votre
<h1>
dans un<div>
:(Le centre de la h1 de votre choix à CSSery.)
OriginalL'auteur Seanonymous
J'ai essayé toutes les solutions proposées, toujours défaut.
Je pourrais résoudre le problème de l'édition de jquery.mobile-1.3.1.min.css.
Utiliser votre éditeur de texte fonction de recherche pour trouver ceci:
et de le commenter :
A parfaitement fonctionné pour moi sur jquery mobile 1.3.1 (utilisé localement, bien sûr).
OriginalL'auteur Pitto
ajouter dans votre fichier
pour modifier la marge par défaut de l'en-tête.
OriginalL'auteur Pascal
C'est fait avec CSS.
Enlever cela de la JqMobile CSS ou le remplacer par votre propre.
OriginalL'auteur sascha
Votre
viewport
meta doit s'adapter à l'écran de l'appareil. Ajouter dans le<head>
:Tous les détails et les explications ici :
Anatomie d'une Page Jquery Mobile
OriginalL'auteur Day
Je sais que c'est une voie sans fil, mais quand même...
Suffit d'utiliser
<p style="text-align:center">
au lieu de<h1>
et vous devriez être fine(Seulement pour les dialogues).OriginalL'auteur AdharSri