Disons que ma fenêtre de navigateur est de 105 pixels haut et je montre un bloc de texte où chaque ligne de texte est de 10 pixels haut - le navigateur me montrera 10 et 1/2 lignes dans la fenêtre (c.-à-d. La ligne de fin sera coupée. verticalement).
Y a-t-il un moyen d'empêcher ce comportement et de ne voir que 10 lignes?
La raison pour laquelle je veux faire est que j'utilise un widget HTML (UiWebView) pour rendre un livre qui sera affiché avec un paradigme à bascule de page.
Remarque: on dirait que les règles de @Page sont censées m'aider à accomplir cela, mais ils ne semblent appliquer que lors de l'impression sur une imprimante.
4 Réponses :
Je suppose que vous ne savez pas combien de lignes vous allez afficher lorsque vous venez les afficher dans la boîte / espace alloué. En outre, vous voulez des lignes qui peuvent ne pas être vues dans leur intégralité placée sur la page suivante?
Je suis sûr que ce n'est pas réalisable dans Pure CSS, mais il serait probablement possible d'utiliser JQuery et une DIV cachée hors page. Fondamentalement, réglez la DIV cachée à la largeur souhaitée, remplissez et vérifiez la hauteur en utilisant jQuery. Si c'est trop grand, tronquez le texte et réessayez.
Vous pouvez utiliser la balise méta
<div style="height:100px;text-overflow:hidden;overflow:ellipsis"> text.... </head>
Les solutions énumérées jusqu'à présent semblent tous laisser le texte coupé à mi-chemin. Avec une fantaisie JavaScript, vous pouvez avoir le navigateur déterminant où coller des ellipses et tronquer votre texte. Cela semblera snappy au détriment d'être étonnamment difficile à programmer. Nous avons discuté en longueur dans .
Si vous pouvez utiliser jQuery, vous pouvez y accomplir avec ma fonction JQuery, il y a ainsi: P>
<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>
Vous pouvez probablement le faire avec la tenterie multicolonne CSS3 (la définition de la première colonne pour être exactement aussi haute et large que l'écran), mais cela n'est pas pris en charge par IE, vous devrez donc utiliser JavaScript pour y parvenir de toute façon. < / p>
Je me trompe peut-être, mais ce qui vous empêche de simplement envelopper le tout dans un
div , avec une hauteur fixe arrondi sur la dernière ligne, et donnez-luidébordement: caché ?Vous pouvez utiliser JavaScript pour obtenir la hauteur de la fenêtre, puis calculer et définir la hauteur de la ligne requise. Je ne suis pas au courant de la solution en utilisant uniquement des CSS.
Pouvez-vous rendre la hauteur de ligne plus courte dans CSS afin que chaque ligne soit plus courte?