Evite que el navegador HTML recorte texto y muestre 1/2 una línea de texto

Digamos que la ventana de mi navegador tiene 105 píxeles y muestro un bloque de texto donde cada línea de texto tiene 10 píxeles de altura; el navegador me mostrará 10 y 1/2 líneas en la ventana (es decir, la línea inferior se recortará verticalmente).Evite que el navegador HTML recorte texto y muestre 1/2 una línea de texto

¿Hay alguna manera de evitar este comportamiento y ver solo 10 líneas?

La razón por la que quiero hacer esto es que estoy usando un widget HTML (UIWebView) para representar un libro que se mostrará con un paradigma de cambio de página.

nota: Parece que las reglas de @page se supone que me ayudan a lograr esto, pero solo parecen aplicarse cuando se imprime en una impresora.

Fuente

2010-08-29 Rube Vogel

Puedo estar equivocado, pero ¿qué es lo que te impide simplemente envolviendo todo en un 'div', con una altura fija redondeada a la última línea, y dándole' overflow: hidden'? –

Puede usar JavaScript para obtener la altura de la ventana gráfica, luego calcular y establecer la altura de línea necesaria. No estoy al tanto de la solución que usa solo CSS. –

¿Puede hacer que la altura de línea sea más corta en CSS para que cada línea sea más corta? – markus

Supongo que no sabe cuántas líneas va a mostrar cuando llegue a mostrarlas en el cuadro/espacio asignado. Además, ¿desea que las líneas que no se vean en su totalidad se coloquen en la página siguiente?

Estoy seguro de que esto no se puede lograr en CSS puro, pero probablemente sería posible utilizando jQuery y un DIV oculto fuera de la página. Básicamente configure el DIV oculto al ancho deseado, rellene y verifique la altura usando jQuery. Si es demasiado alto, trunque el texto e inténtelo de nuevo.

Fuente

2010-08-31 21:08:11

Puede utilizar la etiqueta meta

 
<head> 
<meta name=viewport content="user-scalable=no,width=device-width,height=100px" /> 
</head>

O usted puede poner el texto en una etiqueta div estilizada que parece:

 
<div style="height:100px;text-overflow:hidden;overflow:ellipsis"> 
text.... 
</head>

Con todo lo que se necesita algo de JavaScript importante si quería hacer el texto desplazable o ver el resto del contenido

Fuente

2010-09-03 10:22:50

Las soluciones enumeradas hasta ahora parecen dejar el texto cortado a mitad de camino. Con un Javascript sofisticado, puede hacer que el navegador descubra dónde colocar algunas elipsis y truncar el texto. Esto se verá rápido a costa de ser sorprendentemente difícil de programar. Discutimos esto extensamente en this post.

Si puede utilizar jQuery, que podría lograr con mi función de jQuery existe de esta manera:

<div id="my_div"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam vitae lorem eu ipsum fringilla rhoncus. 
</div> 
<script> 
    $("#my_div").truncateToHeight($("#my_div").text(), 105); 
</script>

Fuente

2010-09-03 22:33:32

Probablemente se podría hacer con el engaño de varias columnas CSS3 (proponiéndose la primera columna a ser exactamente tan alto y ancho como la pantalla), pero eso no es compatible con IE, por lo que tendrá que usar Javascript para lograrlo de todos modos.

Fuente

2010-09-04 18:14:14 Tgr

Evite que el navegador HTML recorte texto y muestre 1/2 una línea de texto

Respuesta

Cuestiones relacionadas