-1

Estou com uma dúvida, tenho um site estilo IFOOD, nele contém uma parte de complementos para os produtos, nos produtos existem a descrição, sendo assim eu passei a descrição para o pop-up dos complementos, segue a imagemPOP-UP COMPLEMENTOS

Com isso, no botão de "+" e menos "-" ele expande ou diminui a descrição, porém, gostaria de saber se, tem como descobrir quando o campo não ultrapassa o limite do width, pois quando não ultrapassar, desejo retirar o botão de "+" e "-"Imagem com descrição menor

segue abaixo meu código HTML e meu 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;
}

2 Respostas 2

1

Você deve definir um max-width pro elemento, e definir o width para fit-content no css.

Depois, você deve criar uma função que irá verificar se o widthdo elemento é igual ao seu max-width, e se for você deve inserir o botão de +.

Como vi que você usa Jquery, montei uma rápida solução, estude e aplique no seu projeto.

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>

1

Para saber se elemento um transbordou uma largura compare as propriedades Element.scrollWidth e 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>

O código acima usa um MutationObserver(), que fornece a capacidade de observar as alterações feitas na árvore DOM, para monitorar o <div> cujo id='saida' e comparar suas propriedades scrollWidth e clientWidth.

Na documentação de Element.scrollWidth está escrito:

A propriedade de somente leitura Element.scrollWidth retorna a largura em pixels do conteúdo de um elemento ou a largura do elemento em si, o que for maior.
Se o elemento for mais amplo do que a área de conteúdo (por exemplo, se houver barras de rolagem para percorrer o conteúdo), o scrollWidth é maior do que o clientWidth.

Na documentação de Element.clientWidth está escrito:

A propriedade Element.clientWidth é zero para elementos embutidos e elementos sem CSS. Caso contrário, é a largura interna de um elemento em pixels.
Inclui preenchimento, mas exclui bordas, margens e barras de rolagem verticais (se houver). inserir a descrição da imagem aqui

Então de acordo com a documentação se não houver transbordamento de conteúdo, ambas as propriedades devem possuir o mesmo valor.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .