J'ai besoin d'afficher du texte sur deux lignes et d'ajouter du "..." si le texte est trop long.

Exemple :

This is some long text and we need to show it on only two lines.

=>

This is some long
text and we need ...

Le texte doit être affiché avec une balise <p>.

2
gabitzish 11 oct. 2011 à 15:13

3 réponses

Meilleure réponse

Text-overflow fonctionne sur certains navigateurs -> http://www.quirksmode.org/css/textoverflow .html

Ou

Excellente réponse ici -> Insérer des points de suspension (...) dans HTML balise si le contenu est trop large

Ou

Pour simplement limiter l'affichage de 2 lignes -> jTruncate Le plugin jQuery fonctionne bien

1
Community 23 mai 2017 à 12:30

Solution CSS3 = pas de solution Javascript

CSS3 prend en charge (IE l'a pris en charge encore plus tôt - l'une des rares choses que d'autres devraient également prendre en charge) text-overflow: ellipsis; paramètre de style qui ajoute automatiquement des points de suspension au texte survolé. La prise en charge du navigateur est visible sur cette page.

CSS2.1 = pas de solution Javascript

Ce JSFiddle est une solution de contournement CSS uniquement, ce n'est probablement pas exactement ce que vous recherchez, mais peut facilement être encore amélioré. Il ajoute simplement des points de suspension à la fin de chaque paragraphe.

CSS2.1 = juste un peu de solution Javascript

L'exemple supérieur pourrait également être amélioré afin que la classe CSS avec :after soit ajoutée uniquement aux paragraphes dont le contenu dépasse les dimensions des éléments. Cela pourrait être fait assez facilement en utilisant un petit peu de Javascript. Le problème est que les points de suspension seraient toujours positionnés à droite . Si ce n'est pas un problème, c'est une très bonne façon de procéder.

Pas de CSS = solution Javascript complète

Il existe également une méthode Javascript pour ce faire et est plutôt bien décrite sur cette réponse Stackoverflow. Il décrit l'algorithme pour créer une ligne pleine de texte, mais une chose similaire peut être obtenue dans votre cas pour remplir deux lignes et en cas de dépassement, ajouter des points de suspension.

Ma suggestion - résultat

Étant donné que Firefox est le seul navigateur à ne pas prendre en charge text-overflow avant la version 7 (en d'autres termes: jusqu'à récemment ), je vous suggère de simplement utiliser la solution CSS3.

Pourquoi? Le navigateur Firefox est automatiquement mis à jour (par défaut), il est donc très probable que seule une petite fraction de vos utilisateurs ne verrait pas les points de suspension. Et aussi jusqu'à ce que leur navigateur soit mis à niveau. S'ils ont explicitement désactivé les mises à jour automatiques du navigateur, ils le font probablement manuellement et l'obtiendront tôt ou tard également.

1
Community 23 mai 2017 à 11:44
var string = "This is some long text and we need to show it on only two lines.".split(" ");
var first_line = string.slice(0,5).join(" ");
var second_line = string.slice(6,10).join(" ");

var display_string = first_line + "<br />" + second_line;
if(string.length > 10) display_string += "...";
$("#text").html(display_string);

Il y a certainement une bien meilleure façon de le faire, mais cela vous permettra au moins de commencer. Il affiche 5 mots par ligne et ajoute et des points de suspension s'il y a plus de 10 mots. Cherchez une meilleure solution mais vous pouvez l'utiliser jusqu'à ce que vous en trouviez une. http://jsfiddle.net/hepW8/

0
bricker 11 oct. 2011 à 11:29