Как определить, когда textContent переполнился своего родителя

Потребности:
Мне нужен триггер, когда текстовое содержимое кнопки выходит за пределы ширины кнопки.

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

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

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.info(child.scrollWidth, 'child');

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

Обычный: Как определить, когда textContent переполнился своего родителя

Курок: Как определить, когда textContent переполнился своего родителя

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

опять тот же код: p вы хотите обнаружить это при изменении размера?

— 01.05.2018 17:48

возможно, один из них может оказаться полезным: google.com/…

— 01.05.2018 17:50

Я нашел эту тему, которая может помочь: stackoverflow.com/questions/6406843/…

— 01.05.2018 18:27

javascript css dom-events whitespace

01.05.2018 17:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

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

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Ответы 2

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

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

01.05.2018 18:23

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

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

$("button").each(function() {
  if ($(this)[0].scrollWidth > $(this).innerWidth()) {
    console.info("Overflow!");
  } else {
    console.info("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>

Я надеюсь, что это помогает!

01.05.2018 18:30