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!