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é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> |
Partager