<p>Also, ich habe jetzt Probleme mit dem Textbereich, ich kann die Größe nicht an die Breite des Inhalts anpassen ... Ich habe eine lange und detaillierte Antwort zur Inhaltshöhe gefunden und sie funktioniert! Aber oben gibt es keine Inhaltsbreite...</p> <p>Das ist dieser Artikel: Erstellen eines Textbereichs mit automatischer Größenänderung</p> <p>Mein Problem ist jedoch nicht gelöst, ich muss auch die Breite anpassen. Berücksichtigen Sie maximale und minimale Breiten. </p> <p>Dies ist ein Beispielcode: </p> <p> <pre class="brush:js;toolbar:false;">$("textarea").each(function () { this.setAttribute("style", "height:" + (this.scrollHeight) + "px;"); }).on("input", function () { this.style.height = 0; this.style.height = (this.scrollHeight) + "px"; }); $("textarea").trigger("input");</pre> <pre class="brush:css;toolbar:false;">textarea{ Rand: 1 Pixel einfarbig schwarz; Mindestbreite: 50 Pixel; maximale Breite: 300 Pixel; Breite: automatisch; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js">< ;/script> <textarea>das ist mein normaler Inhalt, und es muss davon ausgegangen werden, dass dieser Inhalt so lang ist wie die maximale Breite</textarea> <textarea>das ist mein normaler Inhalt, sollte berücksichtigt werden</textarea> <textarea>das ist mein Mindestinhalt</textarea></pre> </p> <p>Außerdem möchte ich, dass sie so aussehen:</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>