javascript - ejemplos - header dinamico html
¿Por qué se trunca el texto de mi encabezado? (8)
Tengo una página creada con jQuery mobile con un encabezado que se parece a esto:
<div data-role="header">
<h1>The Magnet Puzzle</h1>
</div>
Lo probé en un teléfono Android y Windows, y en ambos trunca los últimos tres caracteres del texto del encabezado, a pesar de que el encabezado es lo suficientemente ancho como para caber en todo el título:
Quiero que se vea así en su lugar:
¿Por qué se trunca y cómo puedo solucionarlo para que muestre el título completo?
Creo que el problema real es que JqMobile está configurando el margen izquierdo y derecho al 30%, dejando solo el 40% del ancho total para tu título. Cambie eso al 10% y obtendrá los puntos suspensivos cuando realmente los necesite.
.ui-header .ui-title {
margin-right: 10%;
margin-left: 10%;
}
Esto se hace con CSS.
text-overflow: ellipsis;
Elimínelo de la CSS de JqMobile o sobrescríbalo con el suyo.
He intentado todas las soluciones sugeridas, siempre fallando.
Podría resolver el problema editando jquery.mobile-1.3.1.min.css.
Usa la función de búsqueda de tu editor de texto para encontrar esto:
margin:.6em 30% .8em;
y comentarlo:
/* margin:.6em 30% .8em; */
Funcionó perfectamente para mí en jquery mobile 1.3.1 (usado localmente, por supuesto).
Sé que es un hilo muerto pero aún así ...
Simplemente use <p style="text-align:center"> lugar de <h1> y debería estar bien (solo para diálogos).
<div data-role="header">
<p style="text-align:center">The Magnet Puzzle</p>
</div>
Se está truncando debido a la CSS de jQuery Mobile para .ui-header .ui-title , que establece el overflow en hidden , el white-space en white-space a nowrap y el text-overflow a ellipsis .
No estoy seguro de si hay una mejor manera de hacer esto, pero puede anular el jQuery mobile CSS así:
.ui-header .ui-title {
overflow: visible !important;
white-space: normal !important;
}
Solo envuelve tu <h1> en un <div> :
<div data-role="header">
<div><h1>The Magnet Puzzle</h1></div>
</div>
(Luego, centre el h1 con su CSSery preferido).
Su meta viewport debe encajar 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í:
añade tu archivo
<style type="text/css">
.ui-header .ui-title {margin: 0 20%}
</style>
para cambiar el margen predeterminado del encabezado.