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

Question

我们正在使用一些代码来使鼠标悬停在文本或图标上时出现工具提示。使用变换，我们就可以将工具提示居中，无论它的大小是什么，这样我们就可以根据工具提示的内容来调整大小: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>