43 votes

Existe-t-il une méthode de troncature sûre pour le HTML dans Rails ?

J'ai une chaîne de caractères HTML dans Rails. J'aimerais tronquer la chaîne après un certain nombre de caractères, sans compter les balises HTML. En outre, si la coupure se trouve au milieu d'une balise d'ouverture et de fermeture, j'aimerais fermer la ou les balises ouvertes. Par exemple ;

html = "123<a href='#'>456</a>7890"
truncate_markup(html, :length => 5) --> "123<a href='#'>45</a>"

82voto

msanteler Points 422

l'ordinaire truncate fonctionne bien, il suffit de passer :escape => false comme option pour garder le HTML intact. ex :

truncate(@html_text, :length => 230, :omission => "" , :escape => false)

RubyOnRails.org

* Modifier Je n'ai pas lu la question très attentivement (ou pas du tout TBH), donc cette réponse ne résout pas cette question... Mais c'est la réponse que je cherchais, alors j'espère qu'elle aidera 1 ou 2 personnes :)

36voto

gdelfino Points 6527

Il existe deux solutions complètement différentes portant toutes deux le même nom : truncate_html

  1. https://github.com/ianwhite/truncate_html : Ceci est une gemme et utilise un analyseur html (nokogiri)
  2. https://github.com/hgmnz/truncate_html : C'est un fichier que vous mettez dans votre répertoire d'aides. Il utilise des expressions régulières et n'a pas de dépendances.

16voto

mastaBlasta Points 343

Vous devriez résoudre ce problème avec CSS plutôt qu'avec Ruby. Vous faites quelque chose qui affecte la disposition du DOM, et il n'y a aucun moyen de concevoir par programmation une solution qui fonctionnera de manière cohérente.

Supposons que vous parveniez à faire fonctionner votre gemme d'analyseur HTML et que vous trouviez un nombre de caractères du plus petit dénominateur commun qui fonctionne la plupart du temps.

Que se passe-t-il si vous changez la taille des polices ou la disposition de votre site ? Vous devrez recalculer le nombre de caractères à nouveau.

Ou disons que votre html contient quelque chose comme ceci : <p><br /></p><br /> Cela représente zéro caractère, mais cela entraînerait l'insertion d'un gros morceau de texte vide. Il pourrait même s'agir d'un <blockquote> ou <code> avec un padding ou une marge trop importants pour déséquilibrer votre mise en page.

Ou l'inverse, disons que vous avez ceci 3&nbsp;&#8773;&nbsp;&#955; (3 ≅ λ) Cela fait 26 caractères, mais pour l'affichage, il n'y en a que 5.

Le fait est que le nombre de caractères ne vous dit rien sur la façon dont un texte sera rendu dans le navigateur. Sans parler du fait que les analyseurs HTML sont de gros morceaux de code qui peuvent parfois être peu fiables.

Voici un bon CSS pour traiter ce problème. La pseudo-classe :after ajoute un fondu blanc à la dernière ligne de contenu. Une très belle transition.

body { font-size: 16px;}
p {font-size: 1em; line-height: 1.2em}
/* Maximum height math is:
   line-height * #oflines - 0.4
   the 0.4 offset is to make the cutoff  look nicer */
.lines-3{height: 3.2em;}
.lines-6{height: 6.8em;}
.truncate {overflow: hidden; position:relative}
.truncate:after{
    content:""; 
    height: 1em; 
    display: block; 
    width: 100%; 
    position:absolute;
    background-color:white; 
    opacity: 0.8; 
    bottom: -0.3em
}

Vous pouvez ajouter autant de .lines-x classes comme vous le souhaitez. J'ai utilisé em mais px est tout aussi bien.

Appliquez ensuite cela à votre élément : <div class="truncate lines-3">....lots of stuff.. </div>

et le violon : http://jsfiddle.net/ke87h/

6voto

Mark Points 112

Vous pourriez utiliser le truncate_html plugin pour cela. Il utilise nokogiri et Identités html et fait exactement ce que le nom du plugin suggère.

4voto

jmanrubia Points 515

Nous avions ce besoin à zendone.com. Le problème était que les solutions existantes étaient très lentes pour tronquer les longs documents HTML (Mo) en documents plus courts (Ko). J'ai fini par coder une bibliothèque basée sur Nokogiri appelée truncato . La bibliothèque comprend quelques points de repère en comparant ses performances avec d'autres librairies.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X