绝对定位元素上的 nowrap 和 max-width 问题

Question

我猜这两个属性实际上并没有一起工作，但我的情况：

我正在尝试创建一个工具提示组件。我的工具提示是绝对定位的，因为我不知道内容的长度是多少，所以没有宽度。因此，对于与宽度相关的 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>

Answer 1

避免使用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>

Answer 2

我不确定你的目标是什么，因为有很多相互矛盾的事情正在发生。但我会尝试，希望您能引导我找到您想要的解决方案：

https://jsfiddle.net/q7dyf6xh/

.wrapper {
    position: relative;
    display: run-in;
}

.info {
    position: absolute;
    max-width: 200px;
    white-space: pre-line;
}

看看这个小提琴，你可以看到工具提示现在有一个最大宽度。看看我在用什么：

display: run-in;：根据上下文将元素显示为块或内联

white-space: pre-line;: 空白序列将折叠成一个空白。文本将在必要时换行，并在换行符处

为了更好地了解工作原理，请查看此处：

white-space：如果您使用 nowrap，文本将永远不会换行到下一行。文本继续在同一行，直到遇到标签！

这表示您的 max-width 仍在工作，但现在使用 nowrap overflow 您的元素。试着给你的元素一个background-color，你会发现它实际上只有max-width定义的那么宽。

在这里查看它是如何溢出元素的：https://jsfiddle.net/fcnh1qeo/

现在宽度 overflow: hidden 只会显示您框中的文本。其他一切都被切断了！见这里：https://jsfiddle.net/0qn4wxkg/

我现在使用的是display: run-in; 和white-space: pre-line; 以及max-width: 200px，它们有望为您提供所需的解决方案。不知道你使用它的上下文和代码更多的是猜测而不是答案。但也许我可以指导您找到适合您需求的解决方案

干杯！

Answer 3

添加min-width:100% 和white-space: nowrap;

.wrapper {
  position: relative;
  display: inline;
}
 
.info {
  position: absolute;
  min-width: 100%;
  white-space: nowrap;
}

<div class="wrapper">
    <span>[ ? ]</span>
    <div class="info">Any long text can go in here to test what goes wrong with wrapping.</div>
</div>

Answer 4

display="runin"元素生成一个运行框。插入元素的作用类似于内联或块，具体取决于周围的元素。那是： 如果run-in box包含block box，同block。 如果在插入框之后有一个块框，则该插入框将成为该块框的第一个内联框。 如果后面跟着一个内联框，则插入框变成一个块框。

pre-line 空格序列被折叠。换行符在<br> 处换行，并根据需要填充行框。 下表总结了各种 white-space 值的行为：

max-width CSS 属性设置元素的最大宽度。它防止width属性的使用值变得大于max-width.指定的值

.wrapper {
  position: relative;
  display: run-in;
  top: 100px;
 }


.info {
 position: absolute;
 bottom: 1.2em;
 left: 0;
 max-width: 200px;
 white-space: pre-line;
 background-color: #ddd;

}

Answer 5

不久前我自己也遇到过类似的问题。我使用 flexbox 修复了它，这里的 cmets 已经建议了。

我的代码如下所示：

.has-tooltip {
  display: inline-flex; align-items: flex-start
}

.has-tooltip > .tooltip {
  padding: 1em;
  max-width: 300px;
  background: #bdc3c7;
  word-wrap: break-word;
  transform: translate(-50%,-110%)
}

我还将它复制到this fiddle 以防万一你想看看它。 （：

Answer 6

你说得对，这不起作用。

如果您被允许使用 BR 标签，这是一个可行的解决方案。我曾多次处理工具提示，这是我拥有的最佳解决方案。

代码笔： https://codepen.io/btn-ninja/pen/JNJrgp

它通过使用带有 css 翻译的空白 nowrap 来工作：

<button type="button" class="btn btn-block hasTooltip">
  Tooltip on top
  <i class="tip">Most tooltips are short<br>but you can add line breaks.</i>
</button>

<button type="button" class="btn btn-block hasTooltip right">
  Tooltip on the right.
  <i class="tip">Tooltip on right<br>vertically centered.</i>
</button>     

.hasTooltip .tip {
    position: absolute;
    bottom: 100%; left: 50%; 
    transform: translateX(-50%); }

.hasTooltip.right .tip {
    bottom: auto; left: 100%; top:50%; 
    transform: translateY(-50%); }

翻译允许绝对定位的工具提示相对于内容水平或垂直居中。带有 BR 的空白可实现长内容的换行，同时允许较短的工具提示与工具提示文本的宽度相匹配。

这是完整的 CSS：

.hasTooltip { 
  position:relative; }

.hasTooltip .tip {
  display:block;
  background: #333; color: #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  font-size:inherit; 
  font-style:normal;
  line-height: 1rem;
  text-align:center;
  padding: 8px 16px;
  border-radius:4px;
  margin-bottom:5px;
  pointer-events: none;
  position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  opacity: 0;
  transition: opacity .34s ease-in-out;
  white-space:nowrap;  
  z-index:99; }

.hasTooltip .tip:before {
  content: "";
  display:block; position:absolute; left:0; bottom:-5px; 
  width:100%; height:5px; }

.hasTooltip .tip:after {
  border-left: solid transparent 6px;
  border-right: solid transparent 6px;
  border-top: solid #333 6px;
  bottom: -4px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -6px;
  position: absolute;
  width: 0; }

.hasTooltip:focus .tip,
.hasTooltip:hover .tip {
  opacity: 1;
  pointer-events: auto; }

.hasTooltip.right .tip {
  bottom: auto; left: 100%; top:50%; transform: translateY(-50%);
  margin-bottom:0; 
  margin-left:5px; }

.hasTooltip.right .tip:before {
  left:-5px; bottom:auto; }

.hasTooltip.right .tip:after {
  border-left: 0;
  border-top: solid transparent 6px;
  border-bottom: solid transparent 6px;
  border-right: solid #333 6px;
  bottom:auto; 
  left: -4px;
  top:50%;
  margin-left: 0; 
  margin-top: -6px; }