[FAQ] determiner la longueur d'un texte

**SpaceFrog** · 10/01/2007, 12h23

question: comment caluler la longueur en pixels que prendra un texte à l'écran

Code html :

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
<script type='text/javascript'>
 
function init(){
String.prototype.textWidth=function(police,taille){
        var container=document.createElement('div');
        container.style.visibility='hidden';
        container.style.width='1px';
        container.style.fontFamily=police
        container.style.fontSize=taille+'px'
        container.id="magicdiv";
        document.body.appendChild(container);
        document.getElementById('magicdiv').style.overflow="auto";
        document.getElementById('magicdiv').innerHTML=this;
        var longueur = document.getElementById('magicdiv').scrollWidth;
        document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'))
        return longueur + ' px'
        }
var tt='ldfsezrargdfg'        
alert(tt.textWidth('arial',10))
}
</script>
</head>
 
<body onload='init()'>

on passe la police et la taille en pixels de la police et il affiche la longueur du texte ...

**SpaceFrog** · 10/01/2007, 12h54

Une autre version affiné avec un display inline au lieu de l'overflow ...

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
<script type='text/javascript'>
 
function init(){
String.prototype.textWidth=function(police,taille){
		var container=document.createElement('div');
		container.style.visibility='hidden';
		container.style.fontFamily=police
		container.style.fontSize=taille+'px'
		container.id="magicdiv";
		container.style.display='inline';
		document.body.appendChild(container);
		document.getElementById('magicdiv').innerHTML=this;
		var longueur = document.getElementById('magicdiv').offsetWidth;
		document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'))
		return longueur + ' px'
		}
var tt='ldfsezrargdfgtretert'		
alert(tt.textWidth('arial',12))
}
</script>
</head>
 
<body onload='init()'>