Estoy tratando de agregar una marquesina a mi HTML dinámicamente. Esta es la función que he creado.

 var element = document.getElementById('overflow'); var parentElement = document.getElementById('countheader'); if (element) { var overflow = isElementOverflowing(element, parentElement); if (overflow && !element.classList.contains('marquee')) { element.className += "marquee"; } else if (!overflow) { element.classList.remove('marquee'); } } function isElementOverflowing(element, parentElement) { return parentElement.clientWidth <= element.clientWidth; }

En el archivo CSS tengo el estilo como

 #countheader{ background-color: #e9df8b; width: fit-content; white-space: nowrap; min-width: 100%; overflow: hidden; padding-left: 11px!important; max-width: 1266px!important; } #overflow{ max-width: 1266px!important; }

#HTML

 <div class="page-content" style="background-color: {{isDarkMode ? '#000000' : '#FFFFFF'}}"> <!-- Item Count Card--> <div class="order-card item-card" ng-if="currentStation.get('enableItemCount') && viewTitle === 'Open Orders' && currentStation.get('itemCountFilters').length > 0 && itemsCount.length > 0"> <div class="card-header" id="countheader"> <div id="overflow"> <b class="item-heading">Total Count</b> <span class="item-count" ng-repeat="item in itemsCount">{{item.name}}({{item.quantity}})</span> </div> </div> </div> <!-- Item Count Card -->

Pero en algunos casos, veo que el texto desborda el div principal en la interfaz de usuario, pero en la función isOverflowing todavía muestra un ancho de elemento principal mayor y, por lo tanto, la marquesina no se agrega a la clase. ¿Hay una mejor manera de encontrar la altura del contenido de div principal y div secundario?