隨着窗口更改大小增加文本溢出限制

Question

我正在處理反應組件，並且需要將顯示的文本限制在基於輸入組件進行更改的字段中。我試圖在文本框輸入變得比組件的寬度更長時顯示，以顯示可以適合的內容......。我有一些作品，但它使用寬度：現場設置文本能有多寬去，我正在尋找一個負責任的方式，使之適合或多或少文本

<span 
 
      className='itemTitle' 
 
      onMouseLeave={this.handleMouseLeave} 
 
      id = 'itemTitle' 
 
      style = {{width: '420px', "whiteSpace": "nowrap", 
 
          overflow:"hidden !important", 
 
          'textOverflow': "ellipsis", 
 
         'display': 'inline-block'}}> 
 
      {prompt || card.get('promptText')} 
 
    </span>

Answer 1

解決方案我想出瞭如下。

從呈現標題組件的父組件中，我添加一個ref並添加一個resize eventlistener，它將新的道具發送到ItemTitle組件。

<div ref={input => {{this.rangeInput = input}}}> 
 
         <ItemTitle 
 
         prompt={prompt} 
 
         {...this.props} 
 
         width = {this.state.width} 
 
         /> 
 
    </div> 
 
    
 
    
 
    updateDimensions =() => { 
 
    this.setState({ 
 
     width: this.rangeInput.offsetWidth 
 
    }) 
 
    } 
 

 

 
    componentDidMount() { 
 
    this.updateDimensions(); 
 
    window.addEventListener("resize", this.updateDimensions); 
 
    } 
 

 
    /** 
 
    * Remove event listener 
 
    */ 
 
    componentWillUnmount() { 
 
    window.removeEventListener("resize", this.updateDimensions); 
 
    } 
 
    
 
    
 
    Then in ItemTitle.js 
 
    <span 
 
      className='itemTitle' 
 
      onMouseLeave={this.handleMouseLeave} 
 
      id = 'itemTitle' 
 
      style = {{width: this.state.width - 140, "whiteSpace": "nowrap", 
 
          overflow:"hidden !important", 
 
          'textOverflow': "ellipsis", 
 
         'display': 'inline-block'}}> 
 

 

 
      {prompt || card.get('promptText')} 
 
      </span>