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

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>