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

发布于 2024-10-04 22:42:09 字数 141 浏览 4 评论 0原文

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

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

谢谢

this is the demo :http://jsfiddle.net/KwYjr/10/

how to set the blue div's width is Exactly the width of the word

thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

忆伤 2024-10-11 22:42:09

CSS:

display:inline;

css:

display:inline;
死开点丶别碍眼 2024-10-11 22:42:09

考虑使用。它们没有自己的格式,因此应该可以帮助您换行或进行任何您正在尝试的操作。

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

Consider using <span>. they have no formatting of their own and so should help you wrap or whatever you're trying.

EDIT : span's are the best/default way to do "inline" stuff. div's are by default block elements.

柏林苍穹下 2024-10-11 22:42:09

将 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>

setting the div to display inline will make the div the exact width:

display: inline;

however, from trying this out on your sample the draggable panel then goes left and right. if you still want to maintain the same up down motion you should wrap it in another div and then put the inline div inside it like:

<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>
一花一树开 2024-10-11 22:42:09

我更新了你的小提琴来演示答案。

I updated your Fiddle to demonstrate the answers.

自此以后,行同陌路 2024-10-11 22:42:09

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

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

这是你想要做的吗?

I don't know how to get the width of a word, but what you can do is set a fixed sized for letters, which will easily get you the width of every letter which then gives you the width of the words. Then, measure the div's width with Javascript:

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

Is that what you meant to do?

残疾 2024-10-11 22:42:09

将宽度设置为自动

http://jsfiddle.net/ozzy/KwYjr/24/

< a href="http://jsfiddle.net/ozzy/KwYjr/25/" rel="nofollow">http://jsfiddle.net/ozzy/KwYjr/25/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文