CSS / SCSS: включить наведение, только если существует переполнение

Мне нужно добавить функцию наведения на метки с переполненным текстом. Проверьте этот кодовая ручка, чтобы найти пример того, что я имею в виду.

HTML и CSS:

.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;
}

<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 не может определить, есть ли на самом деле переполнение или нет, вы должны использовать javascript, чтобы делать то, что вы хотите.

— 14.06.2019 09:32

Принятый здесь ответ выглядит как решение вашей проблемы - stackoverflow.com/questions/7738117/…

— 14.06.2019 09:46

css sass

14.06.2019 09:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 253

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы должны обнаружить overflow с помощью javascript, просто сравните ширину клиента и прокрутки (можно также добавить проверку высоты, если 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")
}

.sku {
  width:300px;
}

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

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

.enable-hover:active span,
.enable-hover: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>

14.06.2019 09:54

Вы можете использовать следующую функцию 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.info(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>

14.06.2019 09:56

Ответ принят как подходящий

Вот идея халтурный, где хитрость заключается в том, чтобы рассмотреть псевдоэлемент, который будет скрывать диапазон в случае отсутствия переполнения, что предотвратит эффект наведения/активности. В случае переполнения псевдоэлемент переместится на следующую строку, снова разрешая события мыши.

.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>

Иногда срабатывает зависание делает.

— 15.06.2019 20:07

14.06.2019 11:02