javascript - 使用工具提示裁剪文本

Question

当文本很长时，我需要裁剪它并放在末尾“...”。当我将鼠标悬停在文本上时，我需要显示带有全文的工具提示。 我正在为它编写函数，但我创建了 DOM 的隐藏元素。裁剪我正在用 css 做。可能有更简单的方法吗？

我的函数确定文本是否被裁剪。然后我选择是否显示工具提示。

const isCropText = (text: string, maxWidth: number): boolean => {
  const hiddenDiv = document.createElement('div');
  hiddenDiv.style.position = 'absolute';
  hiddenDiv.style.visibility = 'hidden';
  hiddenDiv.innerHTML = text;

  document.body && document.body.appendChild(hiddenDiv);

  const offsetWidth = hiddenDiv.offsetWidth;

  document.body && document.body.removeChild(hiddenDiv);

  return offsetWidth > maxWidth;
};

Answer 1

这是一种使用 css 实现的方法:

.tooltip {
  display: inline-block;
  background-color: #666;
  color: #CCC;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tooltip:hover {
  width:auto;
}

<div class="tooltip">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>