Question

我们正在使用一些代码在将鼠标悬停在文本或图标上时显示工具提示。使用transform，我们可以将工具提示置于中心位置，无论其大小如何，因此我们可以根据工具提示的内容确定尺寸范围：http://jsfiddle.net/z8wxdjzu/4/

.position-me {
  margin: 10%;
}
.abbr {
  position: relative;
}
.tooltip {
  background: orange;
  display: none;
  text-align: center;
  max-width: 100px;
  padding: 3px;
  position: absolute;
  top: 20px;
  left: 50%;
  right: auto;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0%);
}
.abbr:hover .tooltip {
  display: inline-block;
}

<div class="position-me">
  <span class="abbr">
    Text
    <span class="tooltip">Lorem ipsum dolor sit amet.</span>
  </span>
</div>

问题是即使提供更大的最大宽度，在每个单词后的工具提示中都会添加一个新行。相反，我们希望工具提示在移动到第二行之前填充整个宽度（由max-width提供）。

我们不想设置固定的宽度，因为一些工具提示相当短，我们不希望工具提示中有很多空白空间。我们如何防止断线发生？

编辑：最大宽度实际上很重要，因为一些工具提示足够长，可以跨越多条线，所以只需删除它并使用whitespace: nowrap就不够了，除非我们手动换行，我宁愿阻止。

Answer 1

问题在于，您的tooltip范围希望宽度小于或等于父级宽度，在本例中为span.abbr。

所以为了解决这个问题，我们可以在tooltip周围添加另一个div，它比其他文本的流量更大一些，并且有效。

编辑：我编辑了代码段以使工具提示居中。我还在红色背景中留下了周围的div来展示我在这里应用的技巧。

示例代码段：

    .position-me {
      margin: 10%;
    }
    .abbr {
      position: relative;
    }
    .abbr div {
      position: absolute;
      top: 0;
      left: 50%;
      background-color: red;
      width: 200px;
      height: 2px;
    }
    .tooltip {
      background: orange;
      display: none;
      text-align: center;
      max-width: 100px;
      padding: 3px;
      position: absolute;
      top: 20px;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
    }
    .abbr:hover .tooltip {
      display: inline-block;
    }

    <div class="position-me">
      Bla bla bla
      <span class="abbr">
        HOVER ME
        <div><span class="tooltip">Lorem ipsum dolor sit amet.</span>
      </div></span>
      some more text here.
    </div>

Answer 2

这里是固定的小提琴：Fiddle

您需要删除position:absolute，然后在width:auto课程中添加.tooltip，并将display:inline-block;添加到.abbr:hover .tooltip

Answer 3

你不能在不丢失最大宽度的情况下防止破坏（你可以做到）。

只需添加white-space:nowrap即可停止文本中断，但会导致跨度溢出。所以删除最大宽度，一切都很好。

.position-me {
  margin: 10%;
}
.abbr {
  position: relative;
}
.tooltip {
  background: orange;
  /*display: none; */
  /* disabled for demo */
  text-align: center;
  white-space: nowrap;
  padding: 3px;
  position: absolute;
  top: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.abbr:hover .tooltip {
  display: block;
}

<div class="position-me"> <span class="abbr">
        Text
        <span class="tooltip">Lorem ipsum dolor sit amet.</span>
  </span>
</div>

Answer 4

我用这种方式更改了你的css文件并且它有效！

.position-me {
    margin: 10%;
}
.abbr {
    //position: relative;//notice here
}
.tooltip {
    background: orange;
    display: none;
    text-align: center;
    //max-width: 100px;
    padding: 3px;
    position: absolute;
    top: 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-100%, 200%);//notice here !!!
}
.abbr:hover .tooltip {
    display: block;
}

在跨度中的每个单词后防止换行

4 个答案: