Quand, soudain…
Objectif : Interrompre un paragraphe automatiquement selon la dimension de son contenant.Trois points finissent le paragraphe interrompu, suggérant une suite.
Je cible le paragraphe, dans le contenant, et lui impose des dimensions, un débordement caché, ainsi qu'un peu de style à son contenant :
#cc-m-10053708798 > p{width:290px;height:160px;
overflow:hidden;} Je peux "couper" le texte et ajouter trois points, mais cela n'affecte que la première ligne. white-space:nowrap; text-overflow: ellipsis;
(Rimbaud - Illuminations) Antique : Gracieux fils de Pan ! Autour de ton front couronné de fleurettes et de baies tes yeux, des boules précieuses, remuent. Tachées de lies brunes, tes joues se creusent. Tes crocs luisent. Ta poitrine ressemble à une cithare, des tintements circulent dans tes bras blonds. Ton cœur bat dans ce ventre où dort le double sexe. Promène-toi, la nuit, en mouvant doucement cette cuisse, cette seconde cuisse et cette jambe de gauche.
Dotdotdot frebsite.nl
Pour afficher plusieurs lignes, il faut utiliser ce code javascript +Jquery, (donation ware) : DotDotDot.
La démarche demande d'avoir des habitudes html, css, javascript ainsi que les widget html de Jimdo.
Je vous explique cette application dans l'article ci-dessous.
Raccourcir automatiquement un paragraphe
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.