代码之家 › 专栏 › 技术社区 › TheIronCheek

如何将跨距宽度强制为内部文本的长度?

css html

TheIronCheek · 技术社区 · 7 年前

我有一个图标,当鼠标悬停在上面时会显示工具提示提示。我是根据 W3Schools CSS tooltip example .

代码如下:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  /* I WANT THIS TO CHANGE BASED ON TEXT LENGTH */
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<body style="text-align:center;">

  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
  </div>
</body>

我的问题是,出现在工具提示中的文本是动态生成的,可能比静态文本更宽。 120px 路标宽度。我想根据文本的宽度调整Blurb的宽度,但是如果我将宽度设置为 auto 它只延伸到第一个词的宽度。我该如何改变宽度?

2 回复 | 直到 7 年前

Huangism 7 年前

刚刚设置 white-space: nowrap; 而不是设置宽度 .tooltip .tooltiptext

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  white-space: nowrap; /* this is new */
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<body style="text-align:center;">

  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
  </div>
</body>

Matthew Moore 7 年前

下面将保留最小120px宽的工具提示,并防止文本自行换行。( <br> 标签将需要用于换行)。如果信息太长,它也会断开/看起来很难看。

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    min-width: 120px; /* min-width makes sure it will always be at least 120px */
    white-space: nowrap; /* Prevents text from wrapping on its own */
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
    <span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>

</body>
</html>