在绝对定位的元素上遇到nowrap和max-width的问题 [英] Trouble with nowrap and max-width on an absolutely positioned element

问题描述

我猜这两个属性实际上并不能一起工作，但是我的情况是

I'm guessing these two attributes don't actually work together, but my situation:

我正在尝试创建一个工具提示组件。我的工具提示位于绝对位置，并且我不知道内容的长度，因此没有宽度。因此，对于与宽度相关的CSS，文本只会形成一个高而瘦的列。我尝试了最大宽度，但是就其本身而言，它什么也没做。因此，我决定尝试使用 white-space：nowrap ，虽然它很好地不会换行，但似乎也没有以一种有用的方式来支持max-width，

I'm trying to create a tooltip component. My tooltip is positioned absolutely, and as I don't know what the length of the content would be, has no width. So with width-related css, text just forms a tall, skinny column. I tried max-width, but on it's own, that does nothing. So I decided to try white-space: nowrap, and while it nicely doesn't wrap text, it also doesn't seem to honor max-width in a useful way, with text instead going out of the boundaries of the element.

如果有一个干净的解决方案，我想不出如何解决我的问题。我想要一个绝对定位的div，它可以扩展以适合其内容，直到达到最大值为止。我看到的一个建议是将元素设置为flexbox，但是据我所知，这对于IE而言并不是很好，因此我认为在我的情况下不可行。有什么建议吗？

I can't think of how to solve my problem, if there is a clean solution. I'd like to have an absolutely positioned div that expands to fit it's content until a maximum, at which point it wraps. One suggestion I saw was making the element a flexbox, but from what I can tell, that's not great with IE, so I don't think is viable in my situation. Any advice?

.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 那样将您的文本限制为一行。 最大宽度应该与显示绝对值的块级元素一起使用，但不能在嵌入式元素内使用。为解决此问题，我将工具提示放置在包装器的外部，并使用javascript将其放置在鼠标位置。

Avoid using white-space:nowrap as that will constrain your text to one line. max-width should work with a block level element with display absolute but not inside an inline element. To resolve this, I place the tooltip outside of your wrapper block and use javascript to position it at the mouse location.

这是解决您问题的简单方法。单击打开工具提示以显示工具提示，并移动滑块以更改最大宽度的值。

Here is a simple solution for your issue. Click on "open tooltip" to display the tooltip and move the slider to change the value of 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>

这篇关于在绝对定位的元素上遇到nowrap和max-width的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！