Impedire al browser HTML di ritagliare il testo e visualizzare 1/2 una riga di testo

Diciamo che la finestra del mio browser è alta 105 pixel e mostro un blocco di testo in cui ogni riga di testo è alta 10 pixel - il browser mostrerà 10 e 1/2 linee nella finestra (cioè La linea di fondo verrà ritagliata verticalmente).Impedire al browser HTML di ritagliare il testo e visualizzare 1/2 una riga di testo

C'è un modo per evitare questo comportamento e vedere solo 10 righe?

Il motivo per cui voglio farlo è che sto usando un widget HTML (UIWebView) per eseguire il rendering di un libro che verrà visualizzato con un paradigma di sfogliare le pagine.

nota: Sembra che le regole di pagina debbano aiutarmi a ottenere questo risultato, ma sembrano essere applicabili solo quando si stampa su una stampante.

fonte

2010-08-29 Rube Vogel

Potrei sbagliarmi, ma cosa ti impedisce di semplicemente avvolgere l'intera cosa in un 'div', con un'altezza fissa arrotondata all'ultima riga e dandogli" overflow: hidden'? –

È possibile utilizzare JavaScript per ottenere l'altezza del viewport, quindi calcolare e impostare l'altezza della linea necessaria. Non sono a conoscenza della soluzione che utilizza solo CSS. –

Riesci a ridurre l'altezza della linea in CSS in modo che ogni linea sia più corta? – markus

Suppongo che non si conoscano quante linee si andranno a visualizzare quando si arriva a visualizzarle nella casella/spazio assegnato. Inoltre, vuoi che le linee che non possono essere viste nella loro interezza siano posizionate nella pagina seguente?

Sono sicuro che ciò non è ottenibile in puro CSS, ma sarebbe probabilmente possibile utilizzare jQuery e un DIV nascosto fuori pagina. Fondamentalmente imposta il DIV nascosto alla larghezza desiderata, popola e controlla l'altezza usando jQuery. Se è troppo alto, troncare il testo e riprovare.

fonte

2010-08-31 21:08:11

È possibile utilizzare il meta tag

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

Oppure si può mettere il testo in un tag stilizzata div che assomiglia:

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

Tutto sommato si avrebbe bisogno di alcuni importanti javascript se volevo rendere il testo scorrevole o visualizzare il resto del contenuto

fonte

2010-09-03 10:22:50

Le soluzioni elencate finora sembrano lasciare il testo tagliato a metà. Con alcuni fantastici javascript puoi far capire al browser dove incollare alcune ellissi e troncare il testo. Ciò sembrerà vivace a scapito di essere sorprendentemente difficile da programmare. Ne abbiamo discusso a lungo in this post.

Se è possibile utilizzare jQuery, si potrebbe realizzare con la mia funzione di jQuery ci thusly:

<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>

fonte

2010-09-03 22:33:32

Probabilmente potrebbe fare con CSS3 inganno più colonne (seting la prima colonna di essere esattamente come alto e largo come schermo), ma ciò non è supportato da IE, quindi dovrai comunque utilizzare Javascript per ottenerlo.

fonte

2010-09-04 18:14:14 Tgr

Impedire al browser HTML di ritagliare il testo e visualizzare 1/2 una riga di testo

risposta

Problemi correlati