[JavaScript] Ajustement du contenu au contenant

NoSmoking · 02/04/2011, 15h39

Bonjour,

L'objet :
suite à une question sur le forum Affichage de texte HTML/CSS, je vous propose une solution, parmi sans doute d'autre.

La source :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajustement du contenu au contenant...</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  font-family : Verdana, Arial;
  font-size : 1em;
  margin : 10px;
  padding : 0;
}
body {
  color : #000;
  font-family : Verdana, Arial;
  margin : auto;
  padding-bottom:20px;
  width : 1000px;
}
h1 {
  color : #4488bb;
  font-size : 1.5em;
  padding : 5px;
  padding-bottom : 10px;
  border : 1px solid #B4C8F0;
}
h2 {
  font-size : 1.1em;
}
p {
  margin-left : 20px;
}
.entete {
  margin : 10px 0px 10px 0px;
}
.main_page {
  padding : 10px 20px 20px 20px;
  border : 1px solid #c0c0c0;
}
#edit1, #edit2, #edit3{
  padding : 10px;
  margin-left : 20px;
  border : 1px solid #c0c0c0;
  background-color : #f0f0f0;
  width : 400px; /* */
  overflow : hidden; /* */
}
#edit1 {
  overflow : visible; /* */
}
#debug {
  margin-left : 20px;
}
ul {
  color : #00f;
  font-weight : bold;
  margin : 0;
  padding : 0;
}
ul li{
  font-weight : normal;
  color : #000;
  margin-left : 20px;
}
</style>
<script type="text/javascript">
function ajusteContenu( id){
 
  function getLargeur( obj, txt){
    var Larg, oClone = obj.cloneNode( true);
    oClone.innerHTML = txt;
    document.body.appendChild( oClone);
    Larg = oClone.scrollWidth;
    oClone.parentNode.removeChild( oClone);
    return( Larg);
  }
 
  var oElem = document.getElementById( id);
  var chaine, data;
  var oLarg, iLarg, oScroll;
 
  if( oElem){
    // mettre hidden
    oElem.style.overflow = 'hidden';
    // recup info
    chaine = oElem.innerHTML;
    oLarg  = oElem.clientWidth;
    oScroll = oElem.scrollWidth;
 
    if( oScroll> oLarg){
      // init des datas
      data = chaine.split('');
      var i, nbr = data.length;
      chaine = "";
 
      for( i=0; i <nbr; i++){
        // ajout
        chaine += data[i];
        // test si trop long
        iLarg = getLargeur( oElem, chaine);
        if( iLarg > oLarg){
          // le dernier caract est en trop
          chaine = chaine.substr( 0, chaine.length-1);
          // on insere un espace
          chaine += ' ' + data[i]; // on met un espace et non un BR because FireFox
        }
      }
      // affiche le resultat
      oElem.innerHTML = chaine;
    }
  }
}
</script>
</head>
<body>
<div class="entete">
  <h1>Ajustement du contenu au contenant...</h1>
</div>
<div class="main_page">
  <h2>DIV overflow:visible</h2>
  <div id="edit1">
    Quare hoc quidem praeceptum, cuiuscumqueest, adtollendamamicitiamvalet;illudpotiuspraecipiendumfuit, uteamdiligentiamadhiberemusinamicitiiscomparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendumidScipiopotiusquaminimicitiarumtempuscogitandum putabat.
  </div>
  <h2>DIV overflow:hidden</h2>
  <div id="edit2">
    Quare hoc quidem praeceptum, cuiuscumqueest, adtollendamamicitiamvalet;illudpotiuspraecipiendumfuit, uteamdiligentiamadhiberemusinamicitiiscomparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendumidScipiopotiusquaminimicitiarumtempuscogitandum putabat.
  </div>
  <h2>R&eacute;ajustement du texte</h2>
  <div id="edit3" style="width : 400px;">
    Quare hoc quidem praeceptum, cuiuscumqueest, adtollendamamicitiamvalet;illudpotiuspraecipiendumfuit, uteamdiligentiamadhiberemusinamicitiiscomparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendumidScipiopotiusquaminimicitiarumtempuscogitandum putabat.
  </div>
  <h2>Info</h2>
  <p>
    Ne fonctionne qu'avec du texte ne contenant pas de balise HTML.
  </p>
</div>
<script type="text/javascript">
ajusteContenu( 'edit3');
</script>
</body>
</html>

il suffit de copier/coller et de tester.

Observation :
de part la méthode utilisé cette fonction ne sera efficace que si le texte ne contient pas de balise HTML, peut être sur une autre version.

A vos remarques!

vermine · 07/04/2011, 11h14

Bonne idée. Merci à toi.

danielhagnoul · 07/04/2011, 23h17

Bonsoir

L'utilité de ce script m'échappe totalement, car le CSS offre une solution bien plus propre, l'usage simultané de "max-width" et de "word-wrap" qui donne un résultat correct sur C10, F4 et IE9 (même si IE se distingue, par un passage à la ligne intempestif sur le mot improbable).

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#edit3 {
	width:400px;
	max-width:400px;
	max-height:250px;
	margin:12px;
	padding:6px;
	border:1px solid #c0c0c0;
	background-color:#f0f0f0;
	word-wrap:break-word;
	overflow:hidden;
}

Code html :

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

1
2
3
4
<div id="edit3">
		<p>Quare hoc quidem praeceptum, cuiuscumqueest, adtollendamamicitiamvalet;illudpotiuspraecipiendumfuit, uteamdiligentiamadhiberemusinamicitiiscomparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendumidScipiopotiusquaminimicitiarumtempuscogitandum putabat.</p>
		<p>Quare hoc quidem praeceptum, cuiuscumqueest, adtollendamamicitiamvalet;illudpotiuspraecipiendumfuit, uteamdiligentiamadhiberemusinamicitiiscomparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendumidScipiopotiusquaminimicitiarumtempuscogitandum putabat.</p>
	</div>

NoSmoking · 08/04/2011, 18h47

Ce script date de l'époque ou seul IE prenait en charge, et pour cause, word-wrap:break-word.

Je n'ai fait que le ressortir d'un répertoire, le dépoussiérer et "enjoliver" la présentation.

Il est à noter que si il n'y à rien à faire alors la fonction ne fait rien.

Je dois admettre que je n'avais pas vu que cette propriété était dorénavant intégrée au CSS3, et visiblement depuis la v3.5 pour FF, les versions de CHROME, OPERA et SAFARI que j'ai l'ayant également implémenté.

Avec l'arrivée du CSS3 et l'adoption de cette propriéte par les principaux navigateurs en version récente, il est certains qu'une telle source n'a plus grand avenir.

L'adjonction de word-wrap:break-word dans le STYLE est donc LA solution, l'adjonction éventuelle de la fonction permettant aux versions plus anciennes des navigateurs d'arranger le rendu.

Encore une lecture à ajouter à nos longues soirées d'hivers...

logarithme-galiléen · 13/04/2011, 01h45

Chers frères, merci...

Tout d'abord je souhaiterais saluer vivement NoSmoking pour avoir pris au serieux mon problème d'affichage...! Grace à lui, je suis enfin arrivé à la résolution de mon problème, ce problème qui me hante depuis le debut de mon projet.

En suite, GRAND et SPéCIAL MERCI à Danielhagnoul pour avoir fourni la solution en CSS... Par ailleurs, Danielhagnoul je tiens à te faire comprendre que tu es "mauvais" car il a fallu entamer une procédure autre pour résoudre mon problème alors que t'aurais pu repondre à mon appel depuis le début...! Mais merci encore et sachez que je suis fier du travail fourni sur ce site, aussi bien par les rédacteurs(tutos) que les membres actifs lors des discussions...

Merci chers frères, maintenant il me reste le problème d'encode, car lorsque je saisis un nom avec des espaces dans un formulaire, lorsque que je l'enregistre dans la base, je ne retrouve que le 1er nom avant le 1er espace; Ex: je tape "Lunik Ivan Gracia" et j'enregistre dans la base, mais lorsqu j'affiche je ne vois que "Lunik"... il me faut un bon manuel aussi lol ...!

07/04/2011, 11h14	#2
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 757 Points : 5 757	Bonne idée. Merci à toi. __________________ Elen Poukram - Isegoria - Sandawe
	00

08/04/2011, 18h47	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 933 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 933 Points : 4 756 Points : 4 756	Ce script date de l'époque ou seul IE prenait en charge, et pour cause, word-wrap:break-word. Je n'ai fait que le ressortir d'un répertoire, le dépoussiérer et "enjoliver" la présentation. Il est à noter que si il n'y à rien à faire alors la fonction ne fait rien. Je dois admettre que je n'avais pas vu que cette propriété était dorénavant intégrée au CSS3, et visiblement depuis la v3.5 pour FF, les versions de CHROME, OPERA et SAFARI que j'ai l'ayant également implémenté. Avec l'arrivée du CSS3 et l'adoption de cette propriéte par les principaux navigateurs en version récente, il est certains qu'une telle source n'a plus grand avenir. L'adjonction de word-wrap:break-word dans le STYLE est donc LA solution, l'adjonction éventuelle de la fonction permettant aux versions plus anciennes des navigateurs d'arranger le rendu. Encore une lecture à ajouter à nos longues soirées d'hivers...
	00

13/04/2011, 01h45	#5
logarithme-galiléen Candidat au titre de Membre du Club Inscription : février 2011 Messages : 41 Détails du profil Informations forums : Inscription : février 2011 Messages : 41 Points : 13 Points : 13	Chers frères, merci... Tout d'abord je souhaiterais saluer vivement NoSmoking pour avoir pris au serieux mon problème d'affichage...! Grace à lui, je suis enfin arrivé à la résolution de mon problème, ce problème qui me hante depuis le debut de mon projet. En suite, GRAND et SPéCIAL MERCI à Danielhagnoul pour avoir fourni la solution en CSS... Par ailleurs, Danielhagnoul je tiens à te faire comprendre que tu es "mauvais" car il a fallu entamer une procédure autre pour résoudre mon problème alors que t'aurais pu repondre à mon appel depuis le début...! Mais merci encore et sachez que je suis fier du travail fourni sur ce site, aussi bien par les rédacteurs(tutos) que les membres actifs lors des discussions... Merci chers frères, maintenant il me reste le problème d'encode, car lorsque je saisis un nom avec des espaces dans un formulaire, lorsque que je l'enregistre dans la base, je ne retrouve que le 1er nom avant le 1er espace; Ex: je tape "Lunik Ivan Gracia" et j'enregistre dans la base, mais lorsqu j'affiche je ne vois que "Lunik"... il me faut un bon manuel aussi lol ...!
	01

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email