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>

使用工具提示裁剪文本

1 个答案: