Html Div智能宽度

html 你会注意到第二个div正好适合内容的大小，但是在第一个div上，在a和b的右边有一堆空白。这是因为div达到了其最大宽度300px，然后将b包装到第二行。包装很好，但我希望div缩小到a的宽度，这样右边就并没有空的空间了

有可能让它这样做吗

在铬和FF中测试。

---

​

别问我它为什么有效，它明天可能会崩溃，但增加一些极端的利润权似乎可以解决问题：

.e {
    margin-right: 9999px;
}

---

请参见

您可以避免处理宽度，因为我的理解是，您正在寻找一种以令人满意的方式打断文本的方法

使用

单词break:break all

，在文本碰到容器边缘时将其包装起来

示例：

参考资料：

从的解决方案中分叉：

.e {
    font-size: 10px;
    font-family: arial;
    background-color: yellow;
    position: absolute;
    max-width: 300px;
    margin-right:100%;
}

链接到。
要将div（或任何元素）缩小到其文本内容的大小，可以使用JavaScript获取包含其内容的

范围，并使用
范围获取范围的大小。getBoundingClientRect（）
：

函数大小元素到内容（el）{
var range=document.createRange（）；
范围。选择节点内容（el）；
var textRect=range.getBoundingClientRect（）；
el.style.width=textRect.width+“px”；
}

但是，当然，这只适用于现代浏览器。IE8和IE7使用不同的方法处理范围。实际上，IE7会自动按照您希望的方式处理
max width
，但是当我们运行IE8代码来重新调整IE7上的div大小时，它会将div缩小为0。为了避免编写特定浏览器版本的代码，此代码在IE7和IE8上运行，但包含一些额外的逻辑，以便在两个浏览器版本上都能工作：

函数大小元素到内容（el）{
变量范围、宽度；
if（document.createRange）{
range=document.createRange（）；
范围。选择节点内容（el）；
宽度=范围.getBoundingClientRect（）.width；
}
否则{
range=document.body.createTextRange（）；
范围。移动到元素文本（el）；
范围。移动开始（“字符”，1）；
宽度=范围.boundingWidth；
变量高度=范围.boundingHeight；
range.collapse（）；
范围。移动结束（“字符”，1）；
if（range.boundingHeight==高度）{
return；//文本不换行，所以不要调整大小
}
}
el.style.width=宽度+px；
}

工作演示：
不。。。我不想分裂这个词。正如我所说，“包装很好”。我会尝试用另一种方法来解决这个问题，但现在我不知道怎么做。你是说包装：打破单词？不，我是指我写的东西。请点击本页MDN页面的链接了解更多信息。不知道为什么人们会对你投反对票。它在我的Chrome版本中确实有效。听起来有点不可靠，但这是迄今为止最好/唯一的解决方案。它可以工作，但可能会在某些浏览器上导致意外行为。有人说，如果它很愚蠢并且有效，那么它就不愚蠢，但是你不能确定这个解决方案是否持续有效。它根本不起作用。它可能会强制水平滚动条。重要的是div的位置是绝对的，所以它不会伤害其他元素。同时，有人可以解释它为什么能工作，它之所以能工作，是因为你给了它另一个定义它宽度的因素。绝对元素没有为其左/右位置明确定义，因此添加边距就是告诉它根据其与窗口右侧的关系来定义右侧（但它不允许其低于内容宽度）。请注意，如果屏幕很小，但伸展得很宽，而不是很宽，则数字越小，效果越好。我认为这可能是一个总体上安全的举措（尽管我会彻底测试），但这个想法是有创意的+1!@biziclop：我忍不住觉得玩小提琴很脏。是的，使用100%可能比任意像素值要好。进一步调查后，这并没有给出我想要的效果：它将div压缩到最大单词的大小，然而，我不想要任何挤压效果……我只是希望div是最长行的宽度，可以自然地适应max-width。你想要JavaScript破解吗？还是你在寻找纯CSS？@gilly3:JavaScript还可以。无论如何，这个div是用JS构建的。哇，这看起来正是我想要的。谢谢你的帮助！浮动也“收缩以适应”。
.e {
    margin-right: 9999px;
}

.e {
    font-size: 10px;
    font-family: arial;
    background-color: yellow;
    position: absolute;
    max-width: 300px;
    margin-right:100%;
}