Wie kann ich die Größe des Textbereichs so ändern, dass er zur Breite des Inhalts passt, und die minimale und maximale Breite festlegen?

Question

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...

Das ist dieser Artikel: Erstellen eines Textbereichs mit automatischer Größenänderung

Mein Problem ist jedoch nicht gelöst, ich muss auch die Breite anpassen. Berücksichtigen Sie maximale und minimale Breiten.

Dies ist ein Beispielcode:

$("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");

textarea{
  Rand: 1 Pixel einfarbig schwarz;
  Mindestbreite: 50 Pixel;
  maximale Breite: 300 Pixel;
  Breite: automatisch;
}

<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>

Außerdem möchte ich, dass sie so aussehen:

Answer 1

类似这样的吗？

注意：如评论中所述，此技术使用 contenteditable 属性

#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>