从字符串中获取css宽度

Get css width from a string

本文关键字：css 宽度 获取 字符串      更新时间：2023-09-26

我有一个字符串，我想在动态传递的网页上显示它。我想能够动态确定显示这个字符串所需的css宽度，然后用显示它所需的确切大小将它包装在html元素中。

我目前正在使用javascript和dojo，所以使用这两种方法可以得到答案，但其他方法都不起作用。

更多详细信息我想我应该澄清一下。我想在输入字段中显示字符串，所以不要像div（我认为至少）

那样简单

如果您想设置<input>长度以显示字符串中的所有字符，可以这样设置：

var myString = "abcdefg"; // this is what got input dynamically
var myInputElement = document.getElementById('someInput');
myInputElement.size = myString.length;

因为通常很好的字符度量是通过em。

你可以这样做；

var element = Document.getElementById("ID");
element.style.length = element.value.length + " em";

您必须记住，在根据字符串的字符数计算字符串的像素宽度之前，您必须以某种方式了解所使用字体的度量。

然后，如果要获取输入字符串，请将其包装在<span>，将其嵌入文档中，计算元素的宽度，然后删除跨度并将值添加到其最终目的地。只要跨度与目标元素具有相同的字体样式规则，就可以很好地投影出预期的宽度。

如果你想对它有真正的兴趣和技术性，那么HTML5<画布>标签是你的朋友。

这是一篇很好的文章，可以更好地理解javascript中字体度量的复杂性，也可以帮助您解决这个问题：http://mudcu.be/journal/2011/01/html5-typographic-metrics/#measure

您可以创建一个元素，并在其加载事件中放入一些回调

var span = $("<span/>").text("your input").load(function(e){
    console.log($(this).width());
});

这样你就可以得到当前的宽度。不要为span元素定义任何宽度，也不要浮动。

相关文章：