我想使用JavaScript来计算字符串的宽度。如果不使用单行字体，这可能吗?
如果它不是内置的，我唯一的想法是为每个字符创建一个宽度表，但这是非常不合理的，特别是支持Unicode和不同的类型大小(以及所有浏览器)。
当前回答
文本的宽度和高度可以通过clientWidth和clienttheight获得
var element = document.getElementById ("mytext");
var width = element.clientWidth;
var height = element.clientHeight;
确保style position属性被设置为absolute
element.style.position = "absolute";
不需要在div中，可以在p或span中
其他回答
ExtJS javascript库中有一个很棒的类，叫做Ext.util.TextMetrics，它“为文本块提供精确的像素测量，这样你就可以准确地确定给定文本块的高和宽(以像素为单位)”。您可以直接使用它，也可以查看它的源代码以了解如何完成此操作。
http://docs.sencha.com/extjs/6.5.3/modern/Ext.util.TextMetrics.html
我为此写了一个小工具。也许对某些人有用。它不需要jQuery也能工作。
https://github.com/schickling/calculate-size
用法:
var size = calculateSize("Hello world!", {
font: 'Arial',
fontSize: '12px'
});
console.log(size.width); // 65
console.log(size.height); // 14
小提琴:http://jsfiddle.net/PEvL8/
工作示例:http://jsfiddle.net/tdpLdqpo/1/
HTML:
<h1 id="test1">
How wide is this text?
</h1>
<div id="result1"></div>
<hr/>
<p id="test2">
How wide is this text?
</p>
<div id="result2"></div>
<hr/>
<p id="test3">
How wide is this text?<br/><br/>
f sdfj f sdlfj lfj lsdk jflsjd fljsd flj sflj sldfj lsdfjlsdjkf sfjoifoewj flsdjfl jofjlgjdlsfjsdofjisdojfsdmfnnfoisjfoi ojfo dsjfo jdsofjsodnfo sjfoj ifjjfoewj fofew jfos fojo foew jofj s f j
</p>
<div id="result3"></div>
JavaScript代码:
function getTextWidth(text, font) {
var canvas = getTextWidth.canvas ||
(getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
};
$("#result1")
.text("answer: " +
getTextWidth(
$("#test1").text(),
$("#test1").css("font")) + " px");
$("#result2")
.text("answer: " +
getTextWidth(
$("#test2").text(),
$("#test2").css("font")) + " px");
$("#result3")
.text("answer: " +
getTextWidth(
$("#test3").text(),
$("#test3").css("font")) + " px");
你也可以使用createRange，这比文本克隆技术更准确:
function getNodeTextWidth(nodeWithText) {
var textNode = $(nodeWithText).contents().filter(function () {
return this.nodeType == Node.TEXT_NODE;
})[0];
var range = document.createRange();
range.selectNode(textNode);
return range.getBoundingClientRect().width;
}
getclientrects()方法返回一个DOMRect对象的集合，用于指示客户端中每个CSS边界框的包围矩形。返回值是一个DOMRect对象的集合，对应于与元素关联的每个CSS边框框。每个DOMRect对象都包含以像素为单位的描述边界框的只读左、上、右和下属性，其中左上角相对于视口的左上角。
Mozilla contributor的Element.getClientRects()是CC-BY-SA 2.5授权的。
将所有返回的矩形宽度相加，就得到了文本的总宽度(以像素为单位)。
document.getElementById('in').addEventListener('input', function (event) { var span = document.getElementById('text-render') span.innerText = event.target.value var rects = span.getClientRects() var widthSum = 0 for (var i = 0; i < rects.length; i++) { widthSum += rects[i].right - rects[i].left } document.getElementById('width-sum').value = widthSum }) <p><textarea id='in'></textarea></p> <p><span id='text-render'></span></p> <p>Sum of all widths: <output id='width-sum'>0</output>px</p>
