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

当文本较长时，我需要将其裁剪并放在“ ...”末尾。当我将文本悬停时，我需要显示全文的工具提示。
我正在为此编写函数，但是我创建了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;
};

最佳答案

这是使用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>

关于javascript - 使用工具提示裁剪文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46843825/