Question

我有一个字符串，我希望在动态传入的网页上显示。我希望能够动态确定显示此字符串所需的css宽度，然后将其包装在具有确切大小的html元素中需要显示它。

我目前正在使用javascript和dojo，所以使用这两个答案都很好，但其他任何东西都不行。

更多细节 我想我应该澄清一下。我想在输入字段中显示字符串，所以不像div那样简单（至少我认为）

Answer 1

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

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

Answer 2

由于通常很好地衡量人物的角色。

你可以这样做;

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

Answer 3

你必须记住，在根据字符数计算字符串的像素宽度之前，你必须知道所用字体的指标。

如果那时，您将获取输入字符串，将其包装在＆lt; span＆gt;中，将其嵌入文档中，计算元素的宽度，然后删除范围并将值添加到它的最终目标中只要您的span具有与目标元素相同的字体样式规则，就可以对预期宽度进行相当不错的投影。

如果你想真正了解它，那么HTML 5＆lt; canvas＆gt;标签是你的朋友。

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

Answer 4

你可以创建一个元素并在其加载事件中添加一些回调

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

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

从字符串获取css宽度

4 个答案: