¿Por qué mi texto de encabezado está truncado?

Tengo una página construida con jQuery móvil con el formato de cabecera que tiene este aspecto:¿Por qué mi texto de encabezado está truncado?

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

he comprobado en un Android y un teléfono de Windows, y en tanto que trunca los tres últimos caracteres del texto de cabecera , a pesar de que la cabecera es lo suficientemente amplia como para adaptarse a todo el título:

turncated header

quiero que se vea como esto en su lugar:

full header text

¿Por qué está siendo truncado, y cómo puedo solucionarlo para que se muestre el título completo?

Fuente

2012-01-03 Peter Olson

¿Estás seguro de que el encabezado es lo suficientemente amplio. ¿Has comprobado el: 'ancho',' margen' y 'relleno'? – PeeHaa

@PeeHaa Mira la tira de encabezado. Mira el ancho del texto. ¿Te parece más ancho que el encabezado? –

es bastante difícil ver 'relleno 'al mirar alguna imagen: P – PeeHaa

Creo que el verdadero problema es que JqMobile está configurando el margen izquierdo y derecho al 30%, dejando solo el 40% del ancho total de su título. Cambie eso al 10% y obtendrá la elipsis cuando realmente lo necesite.

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

Fuente

2012-11-16 17:09:09 bvs

No funciona para mí – Pitto

¡Gracias, votaron! – Thomas

¿Por qué establecerían los márgenes predeterminados en 30%? – marcovtwout

Es ser truncado debido a la CSS de jQuery Mobile para .ui-header .ui-title, que establece el overflow-hidden, la white-space-nowrap y la text-overflow-ellipsis.

no estoy seguro de si hay una mejor manera de hacer esto, pero se puede anular el CSS jQuery móvil de este modo:

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

This question has been asked before with the same answer.

Fuente

2012-01-03 20:56:04 Ivan

Esperaba que no tuviera que hacer algo así –

@PeterOlson: Actualicé mi respuesta con un enlace a una pregunta anterior sobre el título de jQuery Mobile . – Ivan

Esto se hace con CSS.

text-overflow: ellipsis;

quitar esto de la CSS JqMobile o sobrescribir con su propio.

Fuente

2012-01-03 20:57:15 sascha

Su viewport debe coincidir con la pantalla del dispositivo. Añadir a la <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" />

Todos los detalles y explicaciones aquí:

Anatomy of a Jquery Mobile Page

Fuente

2013-01-21 22:36:30 Day

Sólo envolver su <h1> en un <div>:

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

(luego centre el h1 con su preferido CSSery.)

Fuente

2013-03-21 23:26:32 Seanonymous

Lo sentimos, pero el diseño estándar incluye el envoltorio DIV + H1 y trunca. Es la anulación de estilo ".ui-header .ui-title {margin-right: 10%; margin-left: 10%;}" para la ganancia. –

He intentado todas las soluciones sugeridas, siempre fallando.

Pude resolver el problema editando jquery.mobile-1.3.1.min.css.

Use su editor de texto encontrará función para encontrar esto:

margin:.6em 30% .8em;

y comentar que:

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

funcionado perfectamente para mí en jQuery Mobile 1.3.1 (utilizado a nivel local, por supuesto).

Fuente

2013-07-03 16:32:42 Pitto

añadir en su archivo

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

para cambiar el margen predeterminado de cabecera.

Fuente

2014-08-14 09:32:52 Pascal

sé que es un hilo, pero todavía muerto ...

Sólo tiene que utilizar <p style="text-align:center"> en lugar de <h1> y que debe estar bien (Sólo para los diálogos).

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

Fuente

2016-05-16 11:04:37 AdharSri

¿Por qué mi texto de encabezado está truncado?

Respuesta

Cuestiones relacionadas