Question

所以我试图添加这个工具提示，根据它包含的文本的宽度调整大小。工具提示是一个div，它有另一个包含文本的div。

<div><div> tooltip text </div></div>

我使用javascript作为mytooltiptext.innerHTML = sometext为其分配文本。隐藏工具提示，显示设置为无，并在鼠标悬停时变为可见。我试图在它甚至根据包含div的文本/文本的宽度变得可见之前设置其宽度。但是当我尝试获取包含div的文本的clientWidth或scrollWidth时，它会显示为零。我的理解是，由于隐藏了元素，它正在发生。我尝试将其显示设置为阻止和隐藏的可见性，然后尝试获取必要的值，但无济于事。有没有办法获得隐藏文本的宽度而不首先使其可见？

Answer 1

不要隐藏它，将其移出屏幕然后将其悬停回来。

CSS：

.inputtext span {
margin-left: -999em;
position: absolute;
}

.inputtext:hover span {
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
}

HTML：

<div class="inputtext">Hover Me<span id="hiddenText">
This is the hidden text and some more text</span></div>

演示：http://jsfiddle.net/calder12/PBsJA/3/

Answer 2

你可以在屏幕外画画。类似的东西：

.myCssStyle{
  position: absolute;
  right: 5000px;
}

如何在网页上找到隐藏文字的宽度？

2 个答案: