Est-il possible de connaître le dernier mot d'une div ?

Version imprimable

19/04/2007, 17h11
ShinJava

Est-il possible de connaître le dernier mot d'une div ?

Bonjour tout le monde,
J'espere que vous allez bien.

J'aimerais mettre un texte long dans une cellule de 400px * 400px (le texte sera donc coupé) et j'aimerais savoir si en Javascript il était possible de récuperer le dernier mot de ce texte avant la coupure ?

Merci d'avance et bonne fin d'apres midi.
++
ShinJava

avec une bidouille de ce genre ...

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
32
33
 
<script type='text/javascript'>
function LastWord(texte,largeurMax){
 
var BaseDiv=document.createElement('div');
BaseDiv.style.width='auto';
BaseDiv.style.display='inline';
BaseDiv.style.visibility='hidden';
BaseDiv.style.zIndex='200';
BaseDiv.style.position='absolute';
document.body.appendChild(BaseDiv)
var tabTexte=texte.split(' ');
var i=0;
   while(BaseDiv.offsetWidth<=largeurMax && i<tabTexte.length){   BaseDiv.innerHTML+=tabTexte[i]+' ';
    																		i++;}
 
 alert('le dernier mot est: '+tabTexte[i-1])
 
}
 
var montexte=''   
for (i=0;i<20;i++){montexte+='mot'+i+' ';}
 
</script>
 
 
</head>
 
<body onload="LastWord(montexte,200)">
 
</body>
 
</html>

20/04/2007, 08h48
ShinJava
Hello SpaceFrog,
Tout d'abord merci d'avoir pris le temps de me répondre.
J'ai essayé d'adapter ton code à mes besoins, mais on va dire que je suis un peu bloqué. Avec quel calcul je determine la variable largeurMax selon le width et le height de ma div ?
Code:

1 2 var montexte='' for (i=0;i<20;i++){montexte+='mot'+i+' ';}
A quoi me sert ce morceau de code ici ? (désolé...)

Merci à toi

++
ShinJava
20/04/2007, 08h49
SpaceFrog

là c'est sur une seule ligne ...
si tu veux sur la hauteur aussi il faut en effet ajouter un test sur le height mais en ayant fixé la largeur du div ...

Oki je comprend,
J'ai fait une petite modification dans le code mais malheureusement j'obtiens jamais le bon résultat.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type='text/javascript'> function LastWord(texte,largeurMax, hauteurMax){ var BaseDiv=document.createElement('div'); BaseDiv.style.width=largeurMax; BaseDiv.style.display='inline'; BaseDiv.style.visibility='hidden'; BaseDiv.style.zIndex='200'; BaseDiv.style.position='absolute'; document.body.appendChild(BaseDiv) var tabTexte=texte.split(' '); var i=0; while(BaseDiv.offsetHeight<=hauteurMax && i<tabTexte.length){ BaseDiv.innerHTML+=tabTexte[i]+' '; i++;} alert('le dernier mot est: '+tabTexte[i-1]) } </script>
J'obtiens soit le mot apres le dernier mot soit le mot qui le précède mais jamais le bon mot... J'ai vraiment du mal à comprendre pourquoi.
Ai-je fais une erreur quelque part ?

Merci d'avance
++
ShinJava

bon deux problèmes ...

le premier facile à résoudre i-2

par contre pour le second souci il prend en fait le mot de ce que tu vois comme étant la ligne précédente ... mais en fait la dernière ligne est moins hauite que la taille de la police et il tronque la ligne, il y en a une partie qui dépasse de la hauteru du div ...

à toi de savoir si tu eus l'afficher quand même au risque d'avoir comme sur l'exemple ci dessous ... ou si tu préfère t'arrêter au mot qu'il t'indique ...

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function LastWord(texte,largeurMax, hauteurMax){
var BaseDiv=document.createElement('div');
BaseDiv.style.width=largeurMax;
BaseDiv.style.height=hauteurMax;
BaseDiv.style.display='inline';
BaseDiv.style.visibility='hidden';
BaseDiv.style.zIndex='200';
BaseDiv.style.position='absolute';
document.body.appendChild(BaseDiv)
var tabTexte=texte.split(' ');
var i=0;
 
   while(BaseDiv.scrollHeight<=hauteurMax ){   BaseDiv.innerHTML+=tabTexte[i]+' ';
    																		i++;}
 
 
 alert('le dernier mot est: '+tabTexte[i-2])
 
 
 
 document.getElementById('test2').style.height=hauteurMax+'px';
document.getElementById('test2').style.width=largeurMax+'px';
document.getElementById('test2').style.border='solid 1px red';
document.getElementById('test2').style.overflow='hidden';
 
 var j=i-2
 for(i=0;i<=j;i++){document.getElementById('test2').innerHTML+=tabTexte[i]+' ';}
 document.getElementById('test2').innerHTML+=" ...";
 
document.getElementById('test').style.height=hauteurMax+'px';
document.getElementById('test').style.width=largeurMax+'px';
document.getElementById('test').style.border='solid 1px red';
document.getElementById('test').style.overflow='hidden';
 
document.getElementById('test').innerHTML=montexte   
}
var montexte=''
for(i=0; i<50;i++){montexte+='motdfsffffff'+i+' ';}
 
 
</script>
</head>
 
<body onload="LastWord(montexte,200,148)">
 
 
<div id='test' ></div><br />
 
<div id='test2' ></div>
</body>
 
</html>

25/04/2007, 17h51
ShinJava

Hello SpaceFrog,
Tout d'abord merci pour ta réponse et désolé pour le retard de la mienne.

La technique du i-2 ne marche pas dans tout les cas, surtout quand on se rapproche de la fin du texte, cela me retourne toujours l'avant dernier mot du texte.

Sinon pour le second souci, en fait il faudrait que la hauteur de ma div soit caller par rapport au texte. Si, par exemple, je n'ai que du texte avec un taille de police à 11px, il faudrait alors que la hauteur total de ma div soit un multiple de 11, c'est bien ça ?

Merci encore
++
ShinJava
25/04/2007, 18h30
SpaceFrog

Ben en fait pour la hauteur il faudrait que la fin du div tombe pile poil avec la fin d'une ligne ...
jette un oeil sur la propriété css line-height...

pour le coup du dernier mot de la ligne...
à mon avis ça doit veinr de l'inseretion de l'espace, il faudrait insérere l'espace àprès avoir fait le test ...