1

リスト要素にフィードする入力要素があり、どちらも同じモノスペース フォントを使用しています。同じモノスペース フォントの 1 文字を含む要素char_width_testの IDです。spanこの幅を確認し、入力フィールドで指定された文字列の長さを掛けて、その文字列から作成されるリスト アイテムの幅を計算します。

var ul = document.getElementById('posts_list');
var li = document.createElement('li');
var txt = document.createTextNode(str);
ul.appendChild(li);
li.innerHTML = str;

li.style.width = (($("#char_width_test").width() * str.length)) + 'px';

上記のコードは、文字列が長いほど、より多くの空白を含む幅を生成します。私が見逃している幅に影響を与えるいくつかの変数があるようですか?

4

1 に答える 1

1

文字間にカーニングがあるため、1 文字の幅は乗算したい幅ではありません。

http://en.wikipedia.org/wiki/カーニング

1 文字の幅とカーニングの量を決定したら、n * char_width + (n - 1) * kerning_widthさらに正確にする必要があります。

kerning = width_of_two_characters - (width_of_one_character * 2)スパンにパディングやマージンがない場合のようなことを試すかもしれません。それがどのように機能するかを見てください。

于 2014-04-25T16:55:27.147 に答える