11540 sujets

JavaScript, DOM et API Web HTML5

Couper 1 texte au bout de sa 2e ligne de texte avec des "..."

Bonjour,


J'ai des paragraphes de textes (dynamiques avec ajax) de 5 à 10 lignes,
entre les balises <p> et </p>, stockés à chaque fois dans la variable oTexte.

J'aurais souhaité n'afficher en javascript que les 2 premières lignes du texte
et rajouter au bout de cette 2e ligne les "..." (points suspension).

Je ne sais pas comment faire.
De plus, mon ami google n'est pas de grand secours !

Pouvez-vous m'aider ?
D'avance merci.
Modifié par jytest (06 Jun 2013 - 11:25)
Une source ou un bout de code en php ferait aussi l'affiaire...
Je l'intégrerai alors dans le fichier php/ajax
Salut,
Alors une solution en php :
http://fr2.php.net/manual/fr/function.substr.php

$texte= 'gkljdfgkldfjgkdfjgkldfjgfkljgkl';
$nombre_de_caractére = 3;
susbstr($texte, $nombre_de_caractére);
//Après tu rajoute en concaténant : '...'


En javascipt :
http://www.toutjavascript.com/reference/reference.php?iref=39
La méthode substr(index_debut[, longueur]) de l'objet String te permet de récupérér la sous-chaîne débutant à l'index index_debut et de longueur maximale longueur caractères (on s'arrête en fin de chaîne s'il n'y a pas d'argument longueur).

    var a = String('abcdb !');
    var sous_chaine = a.substr(3); // sous_chaine = 'db !'
// Pareil tu concaténe pour rajouter les ... à la fin de la chaine


Si tu mets un bout de code, ça permettrai d'être plus précis Smiley smile

++++
voici un lien, ici

Mon souci se passe dans les pavés d'articles de bagues.
Prenons l'exemple de la 1ere bague.
Il y a un texte :
"La sertissure six griffes Celinni 1968 incarne
la bague de fiançailles traditionne par excellence.
Sa simplicité met en valeur l'étincelance de son
diamant."

Ce texte devrait devanir :
"La sertissure six griffes Celinni 1968 incarne
la bague de fiançailles traditionne par excellence..."
Modifié par jytest (06 Jun 2013 - 14:26)
hello, en css3 normalement tu peux faire : 


.grisfonce {
	height: 50px; /* hauteur à définir */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}


après par contre ça n'est pas compatible avec tous les navigateurs.
ou sinon en php :


/**
 * Découpe une chaine de caractère et ajoute ...
 *
 * @param string $str
 * @param int $split
 *
 * @return string $str
 */
function str_split($str, $split = 50) {
	if(intval($split) == 0) return $str;

	if(strlen($str) > $split) {
		return substr(trim($str), 0, $split).'...';
	}
	else
		return $str;
}
salut,
la solution css ne marchera pas, ça ne sert d'ailleurs à rien de combiner un white-space:nowrap à une hauteur conséquente vu que le texte ne s'affichera que sur une seule ligne et que par conséquent, le text-overflow (qui marche bien partout sauf pour les vieilles versions FF), ne sera d'aucune utilité.
C'est pourtant super simple en JS, tu n'as qu'à afficher les n premiers caractères et compléter avec des points. À toi d'estimer le nombre de caractères pour faire deux ligne.
par exemple
J'en étais arrivé à l'instant à la solution de renard13 !

Merci à tous 2.

Mais...
En fait, ce que je souhaitais exactement,
c'est prendre tous les mots (entiers, sans césure) qui composent les 2 premières lignes du paragraphe,
et y ajouter "...",
en faisant attention à la font et au font-size
en utilisant .clientWidth (qui tient compte du navigateur-client !), par exemple !

Et ici, je bloque !!!
Modifié par jytest (06 Jun 2013 - 16:17)
Sujet clos
Aller à