我猜这两个属性实际上并不一起工作，但我的情况是：
我正在尝试创建一个工具提示组件。我的工具提示是绝对定位的，并且由于我不知道内容的长度是多少，所以没有宽度。因此，对于与宽度相关的 css，文本只是形成一个又高又瘦的列。我试过max-width，但就其本身而言，这没有任何作用。所以我决定尝试一下white-space: nowrap，虽然它很好地没有换行文本，但它似乎也没有以有用的方式遵守最大宽度，而是文本超出了元素的边界。
如果有一个干净的解决方案，我想不出如何解决我的问题。我想要一个绝对定位的 div，它可以扩展以适应其内容，直到达到最大值，此时它会换行。我看到的一个建议是将元素设为 Flexbox，但据我所知，这对于 IE 来说并不好，所以我认为在我的情况下不可行。有什么建议吗？
.wrapper {
position: relative;
display: inline;
}
.info {
position: absolute;
bottom: 1.2em;
left: 0;
}
<div class="wrapper">
<span>[ ? ]</span>
<div class="info">Any long text can go in here to test what goes wrong with wrapping.</div>
</div>
避免使用white-space:nowrap因为这会将您的文本限制为一行。max-width应该使用具有绝对显示但不能在内联元素内的块级元素。为了解决这个问题，我将工具提示放在包装器块之外，并使用 javascript 将其定位在鼠标位置。
这是针对您的问题的简单解决方案。单击“打开工具提示”以显示工具提示并移动滑块以更改值max-width.
showContext = function() {
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
var info = document.getElementById("info");
info.style.top = posY + "px";
info.style.left = posX + "px";
info.style.display = "block";
}
changeWidth = function(value) {
var info = document.getElementById("info");
info.style.maxWidth = value + "px";
}
.wrapper {
position: relative;
}
.info {
position: absolute;
max-width:300px;
display:none;
border:1px solid black;
background-color:white;
}
.range {
margin:10px 0px 10px 0px;
display:block;
}
<div class="wrapper">
max-width slider
<input id="range" class="range" type="range" min="100" max="600" oninput="changeWidth(this.value)"/>
<input type="button" value="open tooltip" onclick="javascript:showContext();" />
</div>
<div id="info" class="info">Any long text can go in here to test what goes wrong with wrapping.</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
