CSS實現輸入框寬度隨內容自適應效果

　　有時候我們會遇到如下需求：輸入框的寬度隨內容長度自適應，當輸入框寬度增大到一定值時，里邊的內容自動隱藏。

　　面對這種需求，我們首先想到的是使用input元素標簽，但是發現input標簽的寬度默認設定的是固定的，不支持min-width和max-width樣式，所以如果想實現寬度隨內容自適應就必須通過js動態修改input元素的樣式（width），這樣做就會有點麻煩，畢竟很多人更願意接受只用css就能解決這個問題的方法。如此，HTML中的 contentEditable屬性需要了解一下。

　　具體代碼如下：

// react項目中示例
<div contentEditable="true" class="editable_div" onKeyDown={this.handleKeyDown} />

.editable_div{
        white-space: nowrap;
        overflow-x: hidden;
        display: inline-block;
        font-size: 12px;
        color: #b63f41;
        background-color: #ffffff;
        padding: 2px 8px 2px 4px;
        max-width: 100%;
      }

handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      e.preventDefault()
      const { inputInformationBox } = this.state
      inputInformationBox.push(this.inputValueElem.innerText)
      this.setState({ inputInformationBox }, () => {
        this.scrollWrapElem.scrollTop = this.informationWrapElem.offsetHeight - this.scrollWrapElem.clientHeight
      })
      this.inputValueElem.innerText = ''
    }
  }

這樣，我們就可以實現這樣的需求啦。