Как определить, когда textContent превысил родительский элемент - PullRequest
Новая
       5

Как определить, когда textContent превысил родительский элемент

0 голосов
/ 01 мая 2018

Требуется: Мне нужен триггер, когда textContent кнопки переполнило ее ширину кнопки.

Вопрос: Есть ли какой-нибудь лаконичный / умный способ обнаружить, когда textContent переполнен по сравнению с его родителем?

Пример Codepen

ОБНОВЛЕНО: Похоже, это решит мою проблему.

HTML: 

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button class="parent">
     <div class="child">a rhhh, really wide button lskdfjlasdkfj lksjd flaksjd flaskdjf lkj</div>
   </button>
</div>

CSS: 

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;

  grid-column-gap: 20px;
}
.parent {
    overflow: hidden;
}
button {
  white-space: nowrap;
}

JS: 

const child = document.querySelector('.child');
console.log(child.scrollWidth, 'child');

const parent = document.querySelector('.parent');
console.log(parent.clientWidth,'parent');

Нормальный: normal

Trigger: trigger

Примечание: Я не могу полагаться на полосы прокрутки. (ОБНОВЛЕНО сортировка с использованием полос прокрутки)

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Вдохновленный ссылкой, которую я предоставил вам в своем комментарии, вот рабочий фрагмент: 

$("button").each(function() {
  if ($(this)[0].scrollWidth > $(this).innerWidth()) {
    console.log("Overflow!");
  } else {
    console.log("It's ok.");
  }
});
.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
}

button {
  white-space: nowrap;
  /* Added for test */
  width: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button>a normal button</button>
  <button>tiny</button>
  <button>a rhhh, really wide button</button>
</div>

Надеюсь, это поможет!

0 голосов
/ 01 мая 2018

Не уверен, насколько это надежно, и его раскраска, но у меня это сработало: 

function isButtonOverflowing ( button ) {
    var oldHeight = button.offsetHeight;
    button.style.whiteSpace = 'normal';
    var newHeight = button.offsetHeight;
    button.style.whiteSpace = '';
    return oldHeight !== newHeight;
}
...