Question

我需要为文本溢出的标签添加悬停功能。查看此code pen可以找到我的意思的示例。

HTML和CSS：

add_subdirectory(deps/zeromq-4.3.1)
list (APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_BINARY_DIR}/deps/zeromq-4.3.1 ")

add_subdirectory(deps/cppzmq-4.3.0)

.sku {
  width: 300px;
}

.tooltipp {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.tooltipp:active,
.tooltipp:hover {
  overflow-x: visible;
}

.tooltipp:active span,
.tooltipp:hover span {
  position: relative;
  background-color: PaleGoldenRod;
  border: 1px solid gray;
  padding: 3px;
  margin-left: -4px;
}

在示例中可以看到，即使没有溢出，也始终启用悬停。仅当实际有溢出内容时才可以激活悬停吗？

Answer 1

您应该使用JavaScript来检测Ratio1 > Ratio2，只需比较客户端和滚动宽度（如果fn main() { let mut xs = vec![1, 2, 3, 4, 5].into_iter(); let vs = std::iter::successors(Some(0), |acc| xs.next().map(|n| n + *acc)); assert_eq!(vs.collect::<Vec<_>>(), [0, 1, 3, 6, 10, 15]); }被隐藏，还可以添加高度检查）。

overflow

overflow-y

let skus = document.getElementsByClassName("sku")
for(let sku of skus){
  const overflowing = sku.clientWidth < sku.scrollWidth;
  if(overflowing) sku.classList.add("enable-hover")
}

Answer 2

这是一个 hacky 想法，其中的技巧是考虑一个伪元素，以防在没有溢出的情况下隐藏跨度，从而防止悬停/活动效果。万一发生溢出，伪元素将移至下一行，再次允许鼠标事件。

.sku {
  width: 300px;
  height:1.2em;  /* Make the height equal to height of a line */
  padding:5px;
  z-index:0;
  position:relative;
}

.tooltipp span{
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  display:inline-block;
  max-width:100%;
}

.tooltipp span:active,
.tooltipp span:hover {
  background-color: PaleGoldenRod;
  border: 1px solid gray;
  padding: 3px;
  margin-left: -4px;
  overflow-x: visible;
  max-width:initial;
}
.tooltipp:after {
  content:"";
  height:100%;
  position:relative;
  z-index:1;
  width: 100%;
  margin-left: -99%; /* The magic is here! don't make it 100% or it will also hide the overflowing text */
  display:inline-block;
}

<div class="sku tooltipp"><span>Hover over or touch me to see the full version of this string. It looks like replaced by tooltip.</span></div>
<div class="sku tooltipp"><span>Short</span></div>
<div class="sku tooltipp"><span>Hover over or touch me to see the full version of this string. It looks like replaced by tooltip</span></div>
<div class="sku tooltipp"><span>Short text without hover</span></div>

Answer 3

您可以使用以下Javascript函数：

function hasOverflow(element) {
  const elem = element.cloneNode(true);
  elem.style.overflowX = 'visible';
  elem.style.width = 'auto';
  elem.style.visibility = 'hidden';
  elem.style.display = 'inline-block';
  document.body.appendChild(elem);
  const origWidth = parseInt(window.getComputedStyle(element).width);
  const cloneWidth = parseInt(window.getComputedStyle(elem).width);
  const isOverflowing = origWidth < cloneWidth;
  document.body.removeChild(elem);
  return isOverflowing;
}

[...document.querySelectorAll('.sku')].forEach(sku => {
  sku.addEventListener('mouseenter', () => {
    if (hasOverflow(sku)) sku.classList.add('overflow');
    console.log(hasOverflow(sku));
  })
  sku.addEventListener('mouseleave', () => {
    sku.classList.remove('overflow');
  })
})

.sku {
  width: 300px;
}

.tooltipp {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.overflow:active,
.overflow:hover {
  overflow-x: visible;
}

.overflow:active span,
.overflow:hover span {
  position: relative;
  background-color: PaleGoldenRod;
  border: 1px solid gray;
  padding: 3px;
  margin-left: -4px;
}

<div class="sku tooltipp"><span>Hover over or touch me to see the full version of this string. It looks like replaced by tooltip.</span></div>
<div class="sku tooltipp"><span>Short</span></div>

CSS / SCSS：仅当存在溢出时才启用悬停

3 个答案: