不使用CSS Grid实现文本框内容溢出时自动多行换行

问题说明 #

需要实现文本框在内容溢出时自动换行，从一行逐步扩展到多行，且不使用CSS Grid。此前使用CSS Grid时，会通过grid-template-rows: minmax(120px, auto);配合以下属性实现：

word-wrap: break-word;
word-break: break-all;

解决方案 #

原生<input>是单行输入控件，无法实现多行换行，需替换为<textarea>，再通过基础CSS属性即可实现需求，具体修改如下：

修改后的CSS代码

body {
    background-color: #444;
}

.main-wrapper {
    height: 500px;
    width: 500px;
    margin: 50px auto;
    border: 2px solid #222;
}

.oss {
    border: 1px solid red;
    /* 初始最小高度，对应一行文本高度 */
    min-height: 40px;
    /* 最大高度，对应三行文本高度，可按需调整 */
    max-height: 120px;
    width: calc(100% - 200px);
    margin: 100px;
    /* 禁止用户手动调整文本框大小 */
    resize: none;
    /* 强制长文本换行 */
    word-wrap: break-word;
    word-break: break-all;
    /* 内容超限时显示滚动条 */
    overflow-y: auto;
}

.btn {
    margin: 100px;
}

修改后的HTML代码

<body>
    <div class="main-wrapper">
        <div class="wrapper">
            <form name="output">
                <!-- 替换为textarea以支持多行输入与换行 -->
                <textarea name="textview" class="oss"></textarea>
            </form>
        </div>
        <div class="btn">
            <input type="button" class="bn" value="4" onclick="document.output.textview.value += '4'" />
            <input type="button" class="bn" value="5" onclick="document.output.textview.value += '5'" />
            <input type="button" class="bn" value="6" onclick="document.output.textview.value += '6'" />
        </div>
    </div>
</body>

关键修改点 #

• 替换<input>为<textarea>：这是实现多行换行的核心，textarea原生支持多行输入与内容换行。
• 设置min-height和max-height：控制文本框的高度范围，初始显示一行高度，内容增多时自动扩展至最大高度，超出后显示滚动条。
• 保留换行属性：word-wrap和word-break确保连续无空格的长文本也能强制换行。
• resize: none：避免用户随意调整文本框尺寸，如需允许可移除该属性。

内容的提问来源于stack exchange，提问作者KABIR Kapoor