我試圖讓一個內容可編輯文本框(div元素)根據需要增長，以適應輸入的文本，達到父div寬度的80%。

有沒有辦法只用CSS就能做到這一點？如果沒有，我對Javascript解決方案持開放態度，但我正在使用React，這使事情在這方面變得復雜

這不是我所知道的任何其他問題的重復，因為它需要一個解決方案，這個解決方案是:

獨立于視口大小 支持具有最大寬度的父div 處理內容可編輯 當文本內容改變時工作 # # #也許你可以在父div中有一個div，它是父div的80%。然后為文本框設置width : auto。 聽起來可能有點棘手。

# # #我正在嘗試讓一個文本框根據需要增長，以適應鍵入的文本 到父div寬度的80%。

我相當肯定這不可能僅僅通過CSS來實現，因為CSS沒有辦法確定文本區域的文本內容的長度。

使用javascript，在每次按鍵時，您可以檢查文本內容的長度，如果:

文本內容超過一定數量的按鍵；和 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>

###fore React您的代碼應該與修改后的值類似，但應該實現相同的邏輯。 我認為僅僅通過CSS這是不可能的。

export const WelcomeScreen = () => {
  const divWidth = 400;
  const minTextWidth = 40 ; 
  const [textWidth, setTextWidth] = useState(minTextWidth);
  const handleTextChange = (event) => {
    const { value } = event.target;
    

    if ( (minTextWidth <= value.length*5) && (textWidth < (divWidth / 100) * 80)) {
      setTextWidth(value.length*5);
    }
  };

  return (
    <>
      <div style={{ width: `${divWidth}px` }}>
        <textarea
          style={{ width: `${textWidth}px`, fontSize: "10px" }}
          onChange={handleTextChange}
        />
      </div>
    </>
  );
};

# # #嗯...試試這個:

display: inline-block;

我不確定。讓我知道它是否有效。