<p>Donc, j'ai maintenant des problèmes avec la zone de texte, je ne peux pas la redimensionner à la largeur du contenu... J'ai trouvé une réponse longue et détaillée sur la hauteur du contenu et ça marche ! Mais il n'y a pas de largeur de contenu au-dessus de...</p> <p>Voici cet article : Création d'une zone de texte avec redimensionnement automatique</p> <p>Cependant, mon problème n'est pas résolu, je dois également ajuster la largeur. Tenez compte des largeurs maximales et minimales. </p> <p>Voici un exemple de code : </p> <p> <pre class="brush:js;toolbar:false;">$("textarea").each(function () { this.setAttribute("style", "hauteur:" + (this.scrollHeight) + "px;"); }).on("entrée", fonction () { this.style.hauteur = 0; this.style.height = (this.scrollHeight) + "px" ; }); $("textarea").trigger("input");</pre> <pre class="brush:css;toolbar:false;">textarea{ bordure : 1px noir uni ; largeur minimale : 50 px ; largeur maximale : 300 px ; largeur : automatique ; }</pré> <pre class="brush:html;toolbar:false;"><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/script> <textarea> ceci est mon contenu normal, et il doit considérer que ce contenu est aussi long que la largeur maximale</textarea> <textarea> ceci est mon contenu normal, doit être considéré</textarea> <textarea> ceci est mon contenu minimal</textarea></pre> </p> <p>C'est aussi ce que je veux qu'ils soient :</p>

#myInput {
  min-height: 20px;
  max-height: 100px;
  overflow: auto;
  border: 1px solid #000;
  border-radius: 4px;
  max-width: 80%;
  min-width: 40px;
  display: inline-block;
  padding: 7px;
  resize: vertical;
}

<div contenteditable id="myInput"></div>