用 CSS 扩展文本框以适应其内容？

Posted 2023-02-22

【中文标题】用 CSS 扩展文本框以适应其内容？

【英文标题】：Expand a text box to grow to fit its content with CSS?

【发布时间】：2017-09-20 06:00:03

【问题描述】：

我正在尝试使内容可编辑的文本框（div 元素）根据需要增长以适应输入的文本，最多为父 div 宽度的 80%。

有没有办法只用 CSS 来做到这一点？如果不是，我对 javascript 解决方案持开放态度，但我使用的是 React，这会使这方面的事情复杂化

---

这不是我知道的任何其他问题的重复，因为它需要一个解决方案：

独立于视口大小 支持带有max-width 的父 div 在 contentEditable 上工作 在文本内容更改时工作

【问题讨论】：

***.com/q/8100770/483779的可能重复

不幸的是，除了 <span> 和 contentEditable 之外，没有任何解决方案与 React 相关，但我正在使用表单中的输入。

您希望input 与其内容一起垂直、多行增长吗？ ...如果是，你不能（如果使用word-break: break-word;，Chrome 似乎允许它），input 是单行表单元素，textarea 是多行表单元素

Font scaling based on width of container的可能重复

【参考方案1】：

也许你可以在父 div 中有一个 div，它是父 div 的 80%。然后为文本框设置 width : auto 。 可能听起来有点棘手。

【讨论】：

文本框上的自动宽度只会让它一直填充到完整的 80%，不是吗？

【参考方案2】：

嗯...试试这个：

display: inline-block;

我不确定。让我知道它是否有效。

【参考方案3】：

我正在尝试让文本框根据需要增长以适应键入的文本 放入其中，最多为父 div 宽度的 80%。

我相当肯定这仅通过 CSS 是不可能的，因为 CSS 无法确定 textarea 的文本内容的长度。

使用 javascript，在每次按键时，您都可以检查文本内容的长度以及是否：

文本内容超过了一定的按键次数；和 textarea 的宽度仍然小于允许的最大宽度

然后textarea 可以增量扩展。

工作示例：

var myTextArea = document.getElementsByTagName('textarea')[0];
var myTextLength = myTextArea.value.length
var myTextWidth = parseInt(window.getComputedStyle(myTextArea).width);
var myTextMinLength = 20;
var myTextMaxWidth = ((parseInt(window.getComputedStyle(document.body).width) / 100) * 80);

function checkTextLength() 
    myTextLength = myTextArea.value.length;
    
    if ((myTextLength > myTextMinLength) && (myTextWidth < (myTextMaxWidth))) 
            myTextWidth += 8;
        
    
    myTextArea.style.width = myTextWidth + 'px';


myTextArea.addEventListener('keypress', checkTextLength, false);

textarea 
width: 180px;
height: 40px;

<form>
<textarea placeholder="Start typing..."></textarea>
</form>