如何仅使用 css 不使用 javascript 将 <textarea> 高度自动调整为内部文本的高度？

Posted 2023-03-06

【中文标题】如何仅使用 css 不使用 javascript 将 <textarea> 高度自动调整为内部文本的高度？

【英文标题】：How to automatically adjust the <textarea> height to the inner text's height using only css without using javascript?

【发布时间】：2022-01-13 22:34:37

【问题描述】：

是否可以仅使用css而不使用javascript自动将高度调整为内容的高度？

例如，当高度为200px时，当里面的文字只写100px的高度时，我希望不要有空格。

我希望内部文本的高度影响自身的高度。有办法在整个互联网上使用 javascript。但我想只使用 css 和 html 来实现它。我需要帮助！

这是我的代码。

.code-wrap 
    margin-top: 8px;
    border-radius: 8px;
    background: #1e1e1e;
    max-height: 400px;


.code-title 
    border-radius: 8px 8px 0 0;
    background: #242E64;
    padding: 21px 24px;


.area-wrap 
    padding: 21px 24px;


textarea 
    border: 0;
    resize: none;
    width: 100%;
    height: 300px;
    outline: none;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    background: none;
    font-family: 'D2Coding';

<div class="code-wrap">
    <div class="code-title"><p>Result</p></div>
    <div class="area-wrap">
       <textarea
            rows="15"
            cols="50"
            name="quiz-editor"
            id="mainResultArea"
            class="ed-result"
            readOnly
          >
          </textarea>
    </div>
</div>

【问题讨论】：

仅供参考：将 HTML 中的 className 更改为 class，因此 sn-p 看起来更好。

【参考方案1】：

不幸的是，据我所知，使用原始 CSS 或 HTML 并没有很好的方法来做到这一点。但是，您可以远离 textarea 元素，而在 div 或 text 元素上使用 contentEditable 属性。

查看此基本示例并在此示例文本框中写入：

div 
    border: solid 1px;
    padding: 5px;
    width: 300px;
    min-height: 50px;
    overflow: auto;

<div contentEditable></div>