Perché il mio testo dell'intestazione viene troncato?

Ho una pagina costruita con jQuery mobile con il colpo di testa di marcatura che assomiglia a questo:Perché il mio testo dell'intestazione viene troncato?

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

ho testato in un Android e Windows phone, e in entrambi si tronca gli ultimi tre caratteri del testo dell'intestazione , anche se l'intestazione è abbastanza larga per adattarsi l'intero titolo:

turncated header

voglio farlo sembrare come questo, invece:

full header text

Perché viene troncato e come posso correggerlo in modo che visualizzi l'intero titolo?

fonte

2012-01-03 Peter Olson

Sei sicuro che l'intestazione è abbastanza ampia. Hai controllato: 'width',' margin' e 'padding'? – PeeHaa

@PeeHaa Guarda la striscia di intestazione. Guarda la larghezza del testo. Ti sembra più largo dell'intestazione? –

è piuttosto difficile vedere il 'padding' guardando qualche immagine: P – PeeHaa

Penso che il vero problema è che JqMobile imposta il margine sinistro e destro al 30% lasciando solo il 40% della larghezza totale per il titolo. Passa al 10% e ottieni i puntini di sospensione quando ne hai davvero bisogno.

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

fonte

2012-11-16 17:09:09 bvs

Non funziona per me – Pitto

Grazie, votato! – Thomas

Perché dovrebbero impostare i margini predefiniti al 30%? – marcovtwout

è in fase di troncata a causa della CSS di jQuery Mobile per .ui-header .ui-title, che imposta il overflow-hidden, il white-space-nowrap e il text-overflow-ellipsis.

io non sono sicuro se c'è un modo migliore per fare questo, ma si può ignorare il cellulare CSS jQuery in questo modo:

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

This question has been asked before with the same answer.

fonte

2012-01-03 20:56:04 Ivan

Speravo di non dover fare qualcosa del genere –

@PeterOlson: Ho aggiornato la mia risposta con un collegamento a una domanda precedente riguardante il titolo jQuery Mobile . – Ivan

questo è fatto con i CSS.

text-overflow: ellipsis;

Rimuovere questo dal CSS JqMobile o sovrascriverlo con il proprio.

fonte

2012-01-03 20:57:15 sascha

tuo viewport meta deve inserirsi con lo schermo del dispositivo. Aggiungere al <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" />

Tutti i dettagli e le spiegazioni qui:

Anatomy of a Jquery Mobile Page

fonte

2013-01-21 22:36:30 Day

Basta avvolgere il vostro <h1> in un <div>:

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

(Poi centrare l'h1 con il vostro preferito CSSery.)

fonte

2013-03-21 23:26:32 Seanonymous

Siamo spiacenti, ma il layout standard include il wrapping DIV + H1 e tronca. È il ".ui-header .ui-title {margin-right: 10%; margin-left: 10%;}" sostituisce lo stile per la vittoria. –

Ho provato tutte le soluzioni suggerite, sempre fallendo.

Potrei risolvere il problema modificando jquery.mobile-1.3.1.min.css.

Usa il tuo editor di testo trovare la funzione di trovare questo:

margin:.6em 30% .8em;

e commentare esso:

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

ha funzionato perfettamente per me su jQuery Mobile 1.3.1 (usato localmente, ovviamente).

fonte

2013-07-03 16:32:42 Pitto

aggiungere nel file

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

per cambiare il margine predefinito di intestazione.

fonte

2014-08-14 09:32:52 Pascal

so che è un filo morto ma ancora ...

Basta usare <p style="text-align:center"> invece di <h1> e si dovrebbe andare bene (solo per le finestre di dialogo).

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

fonte

2016-05-16 11:04:37 AdharSri

Perché il mio testo dell'intestazione viene troncato?

risposta

Problemi correlati