Texte sur une ligne 50 caractères max

Version imprimable

22/04/2014, 18h00
jameson

Texte sur une ligne 50 caractères max

Bonjour;

A la lecture du titre ça parait simple, mais en faite je souhaiterai affiché un texte de n caractère.

Si le text fait maximum 50 caractère alors il s'affiche sur une ligne.

Si il fait plus je n'affiche que 50 caractère et j'affiche à la fin de la ligne un petit bouton qui me permet d'afficher le reste des caractères.

Bien sur sur plusieurs lignes.

Mais je ne vois pas trop comment faire.

Je vous remercie d'avance.
22/04/2014, 18h04
Bisûnûrs

Le HTML ne permet pas de compter les caractères. De plus, que faire si tu as une ligne avec 50 "i" et l'autre avec 50 "m" ? La longueur ne sera absolument pas identique, donc compter en nombre de caractères, à moins que tu aies une police mono, n'a pas vraiment d'intérêt.
22/04/2014, 19h37
jameson

le problème n'est pas le nombre de caractère, je peux reformuler ma question en disant que j'ai une div qui fait 100px; et si mon texte dépasse (nowwrap) ajouter un bouton à la fin et caché le reste du texte qui sera visible que si j'appuie sur le bouton.

J'ai l'idée suivante (j'ai mis DIV et SPAN par défaut) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Boîte déroulante</title>
<style type="text/css">
.content {
 display: inline-block;
 width: 50ex;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 vertical-align: middle;
}
.content:target {
 width: auto;
}
</style>
</head>
<body>
<div>
 <span class="content" id="1">S'il fait plus, je n'affiche que 50 caractères, et j'affiche à la fin de la ligne un petit bouton qui me permet d'afficher le reste des caractères.</span>
 <a class="more" href="#1">Lire plus</a>
</div>
 
<div>
 <span class="content" id="2">S'il fait plus, je n'affiche que 50 caractères, et j'affiche à la fin de la ligne un petit bouton qui me permet d'afficher le reste des caractères.</span>
 <a class="more" href="#2">Lire plus</a>
</div>
</body>
</html>

23/04/2014, 08h56
jameson

ça me semble être ce que je cherche je te remercie après mon texte si il dépasse les 50 caractères et ou 100px en width ce trouve sur plusieurs lignes et non une.
23/04/2014, 11h20
jameson

c'est tous bon pour moi je vous remercie.

Très bonne journée à vous.