CSS はテキストエリアをコンテンツに合わせて垂直に拡張できますか?

CSS を使用したテキストエリアの高さの自動調整

Web 開発では、多くの場合、高さを自動的に調整できるテキストエリアを作成する必要があります。ユーザーが入力した内容。 PHP と JavaScript はこの問題に対する解決策を提供しますが、複雑なコードを必要とせずに同じ効果を実現するエレガントな CSS 回避策があります。

CSS を使用して、コンテンツに合わせてテキストエリアを垂直に拡張できますか。 div の "overflow:show" プロパティ?

答えは「はい」です。 CSS プロパティをうまく組み合わせて使用​​すると、スクロールの高さに基づいてテキストエリアの高さを動的に調整できます。行う必要があるのは次のとおりです:

<textarea name="text" oninput=' this.style.height = "";this.style.height = this.scrollHeight "px"'></textarea>

この 1 行のコードは次のように機能します:

• this.style.height = "";: この行はテキストエリアの高さをデフォルト値にリセットし、テキストエリアの高さをデフォルト値にリセットします。必要に応じて縮小します。
• this.style.height = this.scrollHeight "px": この行は、テキストエリアの高さをスクロールの高さ (表示されるコンテンツの高さ) に小さなパディングを加えたものに動的に設定します。潜在的なコンテンツのオーバーフローを考慮してください。

この CSS ソリューションを使用すると、コンテンツに合わせて自動的に拡大および縮小するテキスト領域を作成でき、追加のコーディングを必要とせずにユーザーフレンドリーな編集エクスペリエンスを提供できます。

以上がCSS はテキストエリアをコンテンツに合わせて垂直に拡張できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。