div become marquee when text overflow automatically

Question

I try to convert "p" to marquee automatically whenever DIV overflow is detected. Im stuck with the code below.

<style>
        .box { width:150px; overflow: hidden; background: #ccc; padding: 15px; }
        .content { white-space: nowrap; }
        span { color:red; white-space: nowrap; }
    </style>

<div class="box">
    <p class="content">short text</p>
    </div>  
    
    <div class="box">
    <p class="content">long text long text long text long text</p>
    </div>

<script>
if ($(".box").prop('scrollWidth') > 
 $(".box").width() ) {
  alert("this element is overflowing !!"); 
$(".content").replaceWith(function() { 
    return "<marquee behavior="scroll" direction="left">" + this.innerHTML + "</marquee>"; 
});
}
else {
$(".content").replaceWith(function() { 
    return "p" + this.innerHTML + "</p>"; 
});
}
 </script>  

I try to use replace function to replace "p" into marquee function, but i fail. not sure which part of the code gone wrong.