truncate html created only truncated text

public/akaunting-js/generalAction.js

@@ -362,10 +362,6 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     let truncateText = truncate.innerText.split(" ").join("");
     
-    if (truncateText.length > 30) {
-        truncate.classList.add('truncate');
-    }
-    
     truncate.addEventListener('mouseover', function () {
         if (truncateText.length > 30) {
             truncate.style.animationPlayState = 'running';

resources/views/components/marguee-text.blade.php

@@ -1,8 +1,21 @@
+@php
+    $slot_text_length = strlen($slot);
+
+    $slot_isHtml = strlen(strip_tags($slot)) < strlen($slot);
+@endphp
+
+@if ($slot_text_length >= '30' && ! $slot_isHtml)
 <div data-truncate-parent class="flex lg:block truncate">
     <div
-    @class([ $width ])
+    @class([ 
+        $width,
+        'truncate',
+    ])
     data-truncate
     >
         {!! $slot !!}
     </div>
 </div>
+@else
+    {!! $slot !!}
+@endif