在悬停时显示包含整个文本的吐司

Question

有一个文本比接受的宽度长，必须截断显示，只显示它的一部分和三个点和结尾。

这部分工作正常。我想要的是在将鼠标悬停在吐司上时显示整个文本，同时还保留其下方的原始截断文本。

认为在这种情况下，类似烤面包机的通知框看起来不错。

目前它在悬停时显示整个文本，但它完全覆盖了截断的文本。有办法吗？

.product-details {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.product-details:hover {
  overflow: hidden;
  width: 120px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: visible;
  white-space: normal;
  width: auto;
  border: 1px solid #000000;
  padding: 15px;
}

<div class="product-details">this is a very very long text of course
</div>

Answer 1

.product-details {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
}

.product-details:hover + .product-details-full {

  width: 120px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  width: auto;
  border: 1px solid #000000;
  padding: 15px;
  display: block
}

.product-details-full {
 display: none;}

<div class="product-details">this is a very very long text of course
   
</div>
<div class="product-details-full">this is a very very long text of course
</div>

Answer 2

您只需将文本添加到 title 属性，它就会在悬停时自动显示，无需额外代码。即：

<div title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>

在悬停时显示包含整个文本的吐司

Show a toast containing the whole text on hover

html

css

hover

toast