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

**ShinJava** · 19/04/2007, 17h11

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

**SpaceFrog** · 19/04/2007, 19h20

avec une bidouille de ce genre ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**ShinJava** · 20/04/2007, 08h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 20/04/2007, 08h49

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 ...

**ShinJava** · 20/04/2007, 10h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 20/04/2007, 11h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**ShinJava** · 25/04/2007, 17h51

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

**SpaceFrog** · 25/04/2007, 18h30

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 ...

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

JavaScript

Discussions similaires

Partager

Partager