Is there a possibility of knowing when a field bursts width?

Question

I am with a doubt, I have a site style IFOOD, it contains a part of complements for the products, in the products there are the description, so I passed the description to the pop-up of the complements, follows the image

With this, in the button of "+" and less "-" it expands or decreases the description, however, I wonder if, has how to find out when the field does not exceed the width limit, because when not exceed, I want to remove the button of "+" and "-"

follows below my HTML code and my CSS:

<div class="text-container">
            <div class="content hideContent">
               %prod_desc%               
            </div>
            <div class="show-more">
               <a href="#" onclick="return false" id="mais">+</a>
           </div>
         </div> 
         <script>
        $(".show-more a").on("click", function() {
            var $this = $(this); 
            var $content = $this.parent().prev("div.content");
            var linkText = $this.text();  
            
            if(linkText == "+"){
               linkText = "-";
               $content.switchClass("hideContent", "showContent", 400);
            } else {
               linkText = "+";
               $content.switchClass("showContent", "hideContent", 400);
            };

            $this.text(linkText);
         });

         </script>

div.text-container {
    margin: 0 auto;
    width: 75%; 
    left: 50%;   
}

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
    margin-top: -3%;
    margin-left: -17%;
}

.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
   height: auto;
    word-break: break-all;
    margin-top: -3%;
    margin-left: -17%;
}

.show-more {
    text-align: center;

}
#mais{
   float: left;
    margin-left: 101%;
    margin-top: -11.3%;
    cursor: pointer;
    color: var(--cor-secundaria);
    font-size: x-large;
}

Answer 1

You must define a max-width pro element, and define the width for fit-content in css.

Then you must create a function that will check whether the widthof the element is equal to its max-width, and if it is you must insert the button +.

As I saw that you use Jquery, I put together a quick solution, study and apply in your project.

function checkWidth(element)
{
  if(element.css('width') == element.css('max-width'))
    {
      alert('Botão + deve aparecer!');
    }
}

$('.btn').on('click',function(){

  /* chame essa função logo após o elemento ter sido inserido na página, por exemplo após a finalização de criação do popup */
  checkWidth($('.conferir'));
});

div{
  
  max-width: 300px;
  border: 1px solid #ccc;
  width: fit-content;
  
}

.btn{
  margin-top: .5rem;
  padding: .5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='conferir'>
  asduh das asd asd asd as das da sd asd asd asd asd asd as das das das das da sd
</div>

<div class='btn'>
  Verificar Width
</div>

Answer 2

To know if one element overflowed a width compare the properties Element.scrollWidth and Element.clientWidth.

$(document).ready(function() {
  $("#entrada").on("input", function() {
    $("#saida").text($("#entrada").val());
  });

  $(".showControl").hide();
  const observer = new MutationObserver(function() {    
    if ($("#saida")[0].clientWidth != $("#saida")[0].scrollWidth) {          
      $(".showControl").show();
    } else {
      $(".showControl").hide();
    }
  });
  
  observer.observe($("#saida")[0], {childList: true});
  
});

.hideContent {
  overflow: hidden;
  max-width: 5ch;
  line-height: 1em;
  height: 1cap;
  display: inline-block;
}

.showControl {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Preencha com o texto a ser enviado para detecção:
  <input id="entrada" type="text">
</label>

<h3>Abaixo está o div cujo será detectado overflow:</h3>
<label>
  <div id="saida" class="hideContent"></div>
  <span class="showControl">Overflow detectado!!!</span>
</label>

^{The above code uses a MutationObserver(), which provides the ability to observe changes made to the DOM tree, to monitor the <div> whose id='saida' and compare their properties scrollWidth and clientWidth.}

In the documentation of Element.scrollWidth is written:

The read-only property Element.scrollWidth returns the width in pixels of the contents of an element or the width of the element itself, the greater.
If the element is wider than the content area (for example, if there are scrollbars to traverse the content), the scrollWidth is larger than the clientWidth.

In the documentation of Element.clientWidth is written:

The estate Element.clientWidth is zero for embedded elements and elements without CSS. Otherwise, it is the internal width of an element in pixels.
Includes padding, but excludes edges, edges and vertical scroll bars (if any).

So according to the documentation if there is no content overflow, both properties must have the same value.