你可以使用css的letter-spacing属性 – 如果你和javascript一起使用它,你可以使它在字段中的不同位数动态
var div=document.getElementById('kern');
var s=150;/* size of text field */
var l=div.value.length;/* number of characters */
div.style.letterSpacing=Math.ceil( s / l )+'px';
#kern{
letter-spacing:calc( 150px / 4 );
}
不想直接承认使用画布和它的相关方法的想法让人想到并导致以下情况 – 我认为这似乎工作得很好.
var txt=document.getElementById('kern');
var canvas=document.createElement('canvas');
var ctxt=canvas.getContext('2d');
ctxt.font='12px arial';
var s=parseInt( window.getComputedStyle( txt, null ).getPropertyValue( 'width' ) );
txt.οnchange=function(){
ctxt.clearRect( 0, 0, canvas.width, canvas.height );
var w=ctxt.measureText( this.value ).width;
space=Math.abs( ( s - w ) / this.value.length );
if( w < s ) this.style.letterSpacing=space+'px';
else {
alert('The supplied text is naturally wider than the text input field can support');
}
}.bind( txt );
#kern{
font-size:12px;
font-family:arial;
letter-spacing:calc( 150px / 4 );
}