js 计算 字符 宽度

<span id="computeFontWidth"></span>

#computeFontWidth {

visibility: hidden;

white-space: nowrap;

}

／＊＊

＊ e 显示字符控件

＊ text 要显示的字符串

＊sumWidth e的宽度

＊／

function (e, text, sumWidth) {

if (2 == arguments.length) {

sumWidth = arguments[0].offsetWidth;

} else if (3 == arguments.length) {

sumWidth = arguments[2];

} else {

throw new Error("IllegalArguments Exception");

}

var fontSize = document.defaultView.getComputedStyle(e, null).getPropertyValue("font-size");

var moreSpaceWidth = 0;

var spaceCounter = innerSpaceStat(text);

var spaceWidth = computeSpaceWidth(fontSize);

for (var i = 0; i < spaceCounter.length; i++) {

if (spaceCounter[i] > 1) {

moreSpaceWidth += (spaceCounter[i] - 1) * spaceWidth;

}

}

return sumWidth - computeFontWidth(text, fontSize) - moreSpaceWidth;

//计算字符所占宽度

function computeFontWidth(str, fontSize) {

var width = 0;

if (!!str && "string" == typeof str && str.length > 0) {

var e = document.querySelector("#computeFontWidth");

e.textContent = "";

e.style.fontSize = fontSize;

e.textContent = str;

width = e.offsetWidth;

}

return width;

}

//计算空白字符所占宽度

function computeSpaceWidth(fontSize) {

return computeFontWidth("1 1", fontSize) - 2 * computeFontWidth("1");

}

//字符串内部空白字符统计

function innerSpaceStat(str) {

var counterArray = [];

if (!!str && "string" == typeof str && str.length > 0) {

var counter = 0;

for (var i = 0; i < str.length; i++) {

if (" " == str.charAt(i)) {

counter++;

} else {

if (counter != 0) {

counterArray.push(counter);

}

counter = 0;

}

}

}

return counterArray;

}

}