如何设置div的宽度恰好是其中单词的宽度

时间:2010-11-27 19:28:01

标签: javascript jquery width

这是演示:http://jsfiddle.net/KwYjr/10/

如何设置蓝色div的宽度正好是单词的宽度

感谢

6 个答案:

答案 0 :(得分:4)

的CSS:

display:inline;

答案 1 :(得分:1)

考虑使用<span>。他们没有自己的格式,因此应该帮助你包装或者你正在尝试的任何东西。

编辑:span是进行“内联”操作的最佳/默认方式。 div是默认的块元素。

答案 2 :(得分:1)

将div设置为内联显示将使div成为准确的宽度:

display: inline;

然而,从您的样品上尝试这个,可拖动的面板然后左右移动。如果你仍然希望保持相同的向下运动,你应该将它包装在另一个div中,然后将内联div放在其中,如:

<div id="a" style="position:absolute;width:200px;height:200px;background:red;word-wrap:break-word;">
    <div id="b"><div style="background:blue; display: inline;">sssssssss</div></div>
</div>

答案 3 :(得分:1)

我更新了你的小提琴,以展示答案。

答案 4 :(得分:0)

我不知道如何获得单词的宽度,但你可以做的是为字母设置一个固定大小,这将很容易得到每个字母的宽度,然后给你字的宽度。然后,使用Javascript测量div的宽度:

document.getElementById("thediv").style.width;

这是你的意思吗?

答案 5 :(得分:0)