ellipses pour le texte multiligne dans Chrome

Question

Y a-t-il quelque chose comme -o-ellipsis-lastline pour Google Chrome ?

Je suis en train de créer une extension Chrome et j'aimerais ellipser du texte multiligne à l'aide de CSS.

Answer 1

Il est impossible de créer des ellipses en CSS pur pour les raisons suivantes Spécification W3 pour le débordement de texte .

Mais si vous développez des extensions pour Chrome, vous utilisez déjà JavaScript. Voici donc quelques démos et plugins pour résoudre votre problème :

• http://www.codeitbetter.co.uk/widgets/ellipsis/
• http://jsfiddle.net/danesparza/TF6Rb/1/
• http://jsfiddle.net/MPkSF/
• http://jsfiddle.net/VpmbL/
• https://github.com/pvdspek/jquery.autoellipsis

J'utilise le dernier plugin sur mes propres projets.

Answer 2

Actuellement, il n'existe pas d'ellipse pour le texte multiligne... Mais vous pouvez faire un effet d'ellipse pour les textes multilignes en utilisant des conditions simples. Voici un exemple...

Disons que vous avez un html comme celui-ci...

<div class="class_name"><%=message%></div>

Et vous rendez votre texte au moment de l'exécution... Votre texte sera rendu et placé dans la balise div au lieu du modèle de message. Donc ce que vous pouvez faire c'est...

<% if(message.length < 100) { %>
  <div class="class_name"><%=message%></div>
<% } else { %>
  <div class="class_name"><%=message.slice(0,80)%>...</div>
<% } %>

Si votre texte compte plus de 100 caractères, il affichera une ellipse (à la fin des 80 caractères).

Remarque : les valeurs 100 et 80 sont facultatives. Vous pouvez les modifier selon vos besoins...

J'espère que cela vous aidera :)...