Comment contrôler le nombre de lignes affichées sur un bloc d'entrée utilisateur au format HTML?

Question

J'ai une application Rails qui permet aux utilisateurs de saisir du texte au format HTML (P, OL, UL, BLOCKQUOTE). Je veux maintenant afficher un court résumé de ce texte, mais je veux m'assurer que je ne montre que < = 4 "lignes". Je peux essayer de raccourcir le texte par le nombre de mots affichés, mais cela pourrait se retrouver dans beaucoup de lignes s'il y a des éléments LI d'un mot, etc. Comment puis-je faire cela?

Answer 1

Que diriez-vous:

<input maxlength="value" /> 

http://www.w3schools.com/tags/att_input_maxlength.asp

Answer 2

sont vos lignes déterminées par où le <br> ou \n sont? Si c'est le cas, ne les afficher que sur le text.substring(0, to the location-1 where the 4th break/newline is). Si vos lignes sont déterminées par la longueur (par exemple, vous ne pouvez afficher que 20 caractères pour chaque ligne), ajoutez cette restriction à votre compte. Si oui, je peux vous montrer comment je le ferais.

Answer 3

Vous pouvez utiliser style="max-height: 40"

Mais cela ne fonctionnera que, si vous connaissez la hauteur de la ligne de vos lignes.

Je ne pense pas qu'il existe une notation, où vous pouvez fournir le maximum de lignes.

Answer 4

Je pense que la réponse courte est que vous ne pouvez pas le faire parfaitement, surtout pas du côté du serveur. Une stratégie consisterait simplement à deviner en utilisant quelque chose comme ce que suggérait @Kyra. L'autre chose à faire serait d'envoyer le texte intégral au navigateur de l'utilisateur, puis l'ajouter dans un div de la largeur appropriée, avec la taille de police (qui pourrait être modifiée par le CSS personnel des utilisateurs), ils seront avoir, puis mesurer la hauteur de la div résultant.

Ainsi, votre div pourrait ressembler à ceci:

<div id="dummyDiv" style="position:absolute;top:-10000px;width:400px;font-size:smaller"> 
user text here 
</div> 

Ensuite, vous mesurez la hauteur à l'aide javascript (c.-à-jQuery), et si le texte est trop long, continuer à essayer ceci sur des extraits plus courts du texte jusqu'à ce que c'est une taille raisonnable.

EDIT: crédit pour cette stratégie va flot

Answer 5

Si je vous comprends bien, vous voulez montrer une sorte de prévisualisation HTML de texte que les utilisateurs tapent dans une zone de texte, comme l'aperçu qui montre en dessous de la zone de texte ici sur stackoverflow.

Probablement le moyen le plus simple est avec CSS.

#preview { height: 4em; overflow: hidden; }

Cela devrait fonctionner si la ligne de hauteur est normale. C'est bien sûr juste cacher le texte supplémentaire. Si le fait de se cacher n'est pas acceptable et que vous ne devez générer que 4 lignes de Ruby pour l'afficher, alors c'est plus compliqué. Je ne connais pas Ruby, donc je ne peux pas vous donner d'exemples de code. Je diviserais d'abord le texte à tout moment où une nouvelle ligne serait forcée, comme <br>, <p>, <li> etc. Ensuite, divisez ces morceaux en calculant combien de caractères peuvent tenir sur une ligne et en divisant le texte à ces intervalles. Désolé, je ne connais pas le code Ruby, mais vous devriez être en mesure de diviser le texte en premier sur ces caractères de rupture de ligne et ensuite le diviser en deux caractères X où X est la quantité approximative de caractères que vous pouvez placer sur une ligne.Si vous utilisez une police de largeur fixe, vous pouvez déterminer exactement combien de caractères correspondent à une ligne. Donc, vous finiriez avec un tableau ou quelque chose et ensuite vous collerez les 4 premiers morceaux ensemble.

J'espère que cela aide.

Answer 6

<p><%= truncate strip_tags(object.text), :length => 150, :omission => '…' %></p> 

Si vous tentez de tronquer dans le balisage, vous demandez une mise en page interrompue. Je le retirerais et tronquerais le texte. Si vous avez besoin d'un balisage, j'utiliserais markdown ou textile pour gérer la mise en forme, puis la troncature basée sur la longueur serait plus précisément dimensionnée.