Raccourcir automatiquement un paragraphe

Grâce au script jquery "dotdotdot.js", il est possible de paramétrer le débordement d'un texte dans un contenant de hauteur prédéterminé. On peut aussi paramétrer le type de signe qui signifie le "teaser" ainsi constitué. Si vous resserez la fenêtre du navigateur, le bloc conserve sa hauteur et le script coupe le texte à un autre endroit, ce qui correspond aux exigences responsives. Un style combiné à été rajouté à ce contenant, qui ajoute un lien pour développer le contenu.

Comment installer ce script ?

Ce script cible des div contenant du texte. Leur hauteur doit être fixée et le overflow sur hidden, via CSS.

Pour installer le script, il faut suivre les instructions de l'auteur sur frebsite.nl:

• Téléchargez le dossier de script et placez-le en ligne sur un serveur perso, pour mon exemple, c'est un serveur free.fr.

EDIT 2017 : en raison du protocole HTTPS, il est nécessaire de télécharger une copie du script sur le site jimdo en design personnel

• Récupérez, sur votre dossier placé en ligne, le lien absolu vers le script dotdotdot.js :

https://NomDeVotreServeur.com/jQuery.dotdotdot-master/src/js/jquery.dotdotdot.js

• Créez, sur votre site jimdo, le bloc texte (à partir d'un module html) qui sera touché par le script. Vous lui donnerez une id ou une class correspondant à l'effet voulu (#dot1 ou .dot1 par expl.). Pour comprendre ce choix (id ou class), il faut explorer jusqu'au bout la fonction dotdotdot. Le script n'est pas le même selon le choix.

• Copiez le javascript donné par l'Auteur : http://dotdotdot.frebsite.nl/ et ciblez votre DIV.

• Collez ce code dans un widget html, en tête de chaque page devant en bénéficier.

Vérifiez qu'aucun lien jQuery ne se trouve sur la page, ni dans "modifier le Head".

• Entourez le code des balises javascript, ce qui donnera :

(le script à été réduit au simple effet de base, il comprend 7 versions en tout)

Afin de préciser et améliorer cet effet, il convient de modifier le script selon l'explication de l'auteur, dans la partie "configuration options" et "Customs events", en bas de son article. J'ai essayé de cibler non pas les identifiants, mais des class. Cela évite de redoubler le code à chaque nouveau contenant à cibler. Toutefois, cela ne fonctionne pas avec tous les styles. Le jQuery.dotdotdot plugin est un donationware, merci de donner, obligatoire en cas d'usage commercial.

Exemples :

Ci-après, quelques styles et options qui fonctionnent avec Jimdo. Remarquez que la compatibilité mobile doit être perfectible.

1 - Style de base

Aussitôt que l’idée du Déluge se fut rassise, Un lièvre s’arrêta dans les sainfoins et les clochettes mouvantes et dit sa prière à l’arc–en–ciel à travers la toile de l’araignée. Oh les pierres précieuses qui se cachaient, — les fleurs qui regardaient déjà. Dans la grande rue sale les étals se dressèrent, et l’on tira les barques vers la mer étagée là–haut comme sur les gravures. Le sang coula, chez Barbe–Bleue, — aux abattoirs, — dans les cirques, où le sceau de Dieu blêmit les fenêtres. Le sang et le lait coulèrent. Les castors bâtirent. Les « mazagrans » fumèrent dans les estaminets. Dans la grande maison de vitres encore ruisselante les enfants en deuil regardèrent les merveilleuses images. Une porte claqua, et sur la place du hameau, l’enfant tourna ses bras, compris des girouettes et des coqs des clochers de partout, sous l’éclatante giboulée. Madame *** établit un piano dans les Alpes. La messe et les premières communions se célébrèrent aux cent mille autels de la cathédrale. Les caravanes partirent. Et le Splendide Hôtel fut bâti dans le chaos de glaces et de nuit du pôle. [

2 - Remplacement des (…) par d'autres signes

Aussitôt que l’idée du Déluge se fut rassise, Un lièvre s’arrêta dans les sainfoins et les clochettes mouvantes et dit sa prière à l’arc–en–ciel à travers la toile de l’araignée. Oh les pierres précieuses qui se cachaient, — les fleurs qui regardaient déjà. Dans la grande rue sale les étals se dressèrent, et l’on tira les barques vers la mer étagée là–haut comme sur les gravures. Le sang coula, chez Barbe–Bleue, — aux abattoirs, — dans les cirques, où le sceau de Dieu blêmit les fenêtres. Le sang et le lait coulèrent. Les castors bâtirent. Les « mazagrans » fumèrent dans les estaminets. Dans la grande maison de vitres encore ruisselante les enfants en deuil regardèrent les merveilleuses images. Une porte claqua, et sur la place du hameau, l’enfant tourna ses bras, compris des girouettes et des coqs des clochers de partout, sous l’éclatante giboulée. Madame *** établit un piano dans les Alpes. La messe et les premières communions se célébrèrent aux cent mille autels de la cathédrale. Les caravanes partirent. Et le Splendide Hôtel fut bâti dans le chaos de glaces et de nuit du pôle.

3 - Choisi de couper au mot, à la lettre ou au descendant. Retour optionnel à la lettre lorsque le mot est trop long (ne fonctionne pas)

Aussitôtquel’idéeduDélugesefutrassise,Unlièvres’arrêtadanslessainfoinsetlesclochettesmouvantesetditsaprièreàl’arc–en–cielàtraverslatoiledel’araignée.Ohlespierresprécieusesquisecachaient,—lesfleursquiregardaientdéjà.Danslagranderuesalelesétalssedressèrent,etl’ontiralesbarquesverslamerétagéelà–hautcommesurlesgravures.Lesangcoula,chezBarbe–Bleue,—auxabattoirs,—danslescirques,oùlesceaudeDieublêmitlesfenêtres.Lesangetlelaitcoulèrent.Lescastorsbâtirent.Les«mazagrans»fumèrentdanslesestaminets.Danslagrandemaisondevitresencoreruisselantelesenfantsendeuilregardèrentlesmerveilleusesimages.Uneporteclaqua,etsurlaplaceduhameau,l’enfanttournasesbras,comprisdesgirouettesetdescoqsdesclochersdepartout,sousl’éclatantegiboulée.Madame***établitunpianodanslesAlpes.Lamesseetlespremièrescommunionssecélébrèrentauxcentmilleautelsdelacathédrale.Lescaravanespartirent.EtleSplendideHôtelfutbâtidanslechaosdeglacesetdenuitdupôle.

4 - Laissser un élément apparaître après les (…), pour lier à la suite du texte. Rajouter l'élément en fin de texte : <a href="#" class="readmore">Read more »</a> Aussitôt que l’idée du Déluge se fut rassise, Un lièvre s’arrêta dans les sainfoins et les clochettes mouvantes et dit sa prière à l’arc–en–ciel à travers la toile de l’araignée. Oh les pierres précieuses qui se cachaient, — les fleurs qui regardaient déjà. Dans la grande rue sale les étals se dressèrent, et l’on tira les barques vers la mer étagée là–haut comme sur les gravures. Le sang coula, chez Barbe–Bleue, — aux abattoirs, — dans les cirques, où le sceau de Dieu blêmit les fenêtres. Le sang et le lait coulèrent. Les castors bâtirent. Les « mazagrans » fumèrent dans les estaminets. Dans la grande maison de vitres encore ruisselante les enfants en deuil regardèrent les merveilleuses images. Une porte claqua, et sur la place du hameau, l’enfant tourna ses bras, compris des girouettes et des coqs des clochers de partout, sous l’éclatante giboulée. Madame *** établit un piano dans les Alpes. La messe et les premières communions se célébrèrent aux cent mille autels de la cathédrale. Les caravanes partirent. Et le Splendide Hôtel fut bâti dans le chaos de glaces et de nuit du pôle. Read more »

5 - Calculer automatiquement la coupure en fonction de la largeur au window resize Aussitôt que l’idée du Déluge se fut rassise, Un lièvre s’arrêta dans les sainfoins et les clochettes mouvantes et dit sa prière à l’arc–en–ciel à travers la toile de l’araignée. Oh les pierres précieuses qui se cachaient, — les fleurs qui regardaient déjà. Dans la grande rue sale les étals se dressèrent, et l’on tira les barques vers la mer étagée là–haut comme sur les gravures. Le sang coula, chez Barbe–Bleue, — aux abattoirs, — dans les cirques, où le sceau de Dieu blêmit les fenêtres. Le sang et le lait coulèrent. Les castors bâtirent. Les « mazagrans » fumèrent dans les estaminets. Dans la grande maison de vitres encore ruisselante les enfants en deuil regardèrent les merveilleuses images. Une porte claqua, et sur la place du hameau, l’enfant tourna ses bras, compris des girouettes et des coqs des clochers de partout, sous l’éclatante giboulée. Madame *** établit un piano dans les Alpes. La messe et les premières communions se célébrèrent aux cent mille autels de la cathédrale. Les caravanes partirent. Et le Splendide Hôtel fut bâti dans le chaos de glaces et de nuit du pôle. Read more »

6 - Ajouter deux signes pour faire apparaître tout le contenu et refermer ensuite. il faut ajouter une CSS pour changer la hauteur du contenant, ciblant la class ".opened" Aussitôt que l’idée du Déluge se fut rassise, Un lièvre s’arrêta dans les sainfoins et les clochettes mouvantes et dit sa prière à l’arc–en–ciel à travers la toile de l’araignée. Oh les pierres précieuses qui se cachaient, — les fleurs qui regardaient déjà. Dans la grande rue sale les étals se dressèrent, et l’on tira les barques vers la mer étagée là–haut comme sur les gravures. Le sang coula, chez Barbe–Bleue, — aux abattoirs, — dans les cirques, où le sceau de Dieu blêmit les fenêtres. Le sang et le lait coulèrent. Les castors bâtirent. Les « mazagrans » fumèrent dans les estaminets. Dans la grande maison de vitres encore ruisselante les enfants en deuil regardèrent les merveilleuses images. Une porte claqua, et sur la place du hameau, l’enfant tourna ses bras, compris des girouettes et des coqs des clochers de partout, sous l’éclatante giboulée. Madame *** établit un piano dans les Alpes. La messe et les premières communions se célébrèrent aux cent mille autels de la cathédrale. Les caravanes partirent. Et le Splendide Hôtel fut bâti dans le chaos de glaces et de nuit du pôle.

7 - Limite le texte à une hauteur déterminée (ici, 70px) Aussitôt que l’idée du Déluge se fut rassise, Un lièvre s’arrêta dans les sainfoins et les clochettes mouvantes et dit sa prière à l’arc–en–ciel à travers la toile de l’araignée. Oh les pierres précieuses qui se cachaient, — les fleurs qui regardaient déjà. Dans la grande rue sale les étals se dressèrent, et l’on tira les barques vers la mer étagée là–haut comme sur les gravures. Le sang coula, chez Barbe–Bleue, — aux abattoirs, — dans les cirques, où le sceau de Dieu blêmit les fenêtres. Le sang et le lait coulèrent. Les castors bâtirent. Les « mazagrans » fumèrent dans les estaminets. Dans la grande maison de vitres encore ruisselante les enfants en deuil regardèrent les merveilleuses images. Une porte claqua, et sur la place du hameau, l’enfant tourna ses bras, compris des girouettes et des coqs des clochers de partout, sous l’éclatante giboulée. Madame *** établit un piano dans les Alpes. La messe et les premières communions se célébrèrent aux cent mille autels de la cathédrale. Les caravanes partirent. Et le Splendide Hôtel fut bâti dans le chaos de glaces et de nuit du pôle. Read more »

8 - Styles combinés : 2 - 4 - 5 . Les fonctions ne s'associent pas correctement. Aussitôt que l’idée du Déluge se fut rassise, Un lièvre s’arrêta dans les sainfoins et les clochettes mouvantes et dit sa prière à l’arc–en–ciel à travers la toile de l’araignée. Oh les pierres précieuses qui se cachaient, — les fleurs qui regardaient déjà. Dans la grande rue sale les étals se dressèrent, et l’on tira les barques vers la mer étagée là–haut comme sur les gravures. Le sang coula, chez Barbe–Bleue, — aux abattoirs, — dans les cirques, où le sceau de Dieu blêmit les fenêtres. Le sang et le lait coulèrent. Les castors bâtirent. Les « mazagrans » fumèrent dans les estaminets. Dans la grande maison de vitres encore ruisselante les enfants en deuil regardèrent les merveilleuses images. Une porte claqua, et sur la place du hameau, l’enfant tourna ses bras, compris des girouettes et des coqs des clochers de partout, sous l’éclatante giboulée. Madame *** établit un piano dans les Alpes. La messe et les premières communions se célébrèrent aux cent mille autels de la cathédrale. Les caravanes partirent. Et le Splendide Hôtel fut bâti dans le chaos de glaces et de nuit du pôle. Vraiment super ce script! »