<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;
}
}