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 ≅ λ
(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/