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

Question

Ниже мой HTML и CSS. Я хочу использовать javascript, чтобы определить, когда один из LI s переполнен. Затем я хочу поместить этот элемент во всплывающее меню, похожее на панели инструментов Win32. Мне нужно знать, когда LI переполнен и какие LI s переполнены.

Я в порядке, если это работает только в современных браузерах, и я не хочу использовать такую ​​среду, как JQuery.

<div id="menu">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

#menu ul {
margin: 0px;
list-style-type: none;
list-style-image: none;
height: 28px;
overflow: hidden;
}

Answer 1

Вы должны сделать это с помощью JavaScript. Сравните scrollHeight и offsetHeight. Если scrollHeight больше, оно переполнено. Э.Г.

function overflowed(ElementID) {
  var Element=document.getElementById(ElementID);

  return Element.scrollHeight>Element.offsetHeight;
}

Код в действии.