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

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 稍大但在其他文本流之外，并且有效。

编辑:我编辑了片段以使工具提示居中。我还为周围的 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>