Textüberlaufgrenze wird erhöht, wenn das Fenster die Größe ändert

Question

Ich arbeite an einer Reaktionskomponente und muss den angezeigten Text in einem Feld einschränken, das sich basierend auf einer Eingabekomponente ändert. Ich versuche es so zu machen, wenn die Texteingabe länger als die Breite der Komponente wird, um anzuzeigen, was passt, gefolgt von .... Ich habe etwas, das funktioniert aber es nutzt Breite: Feld festlegen, wie weit der Text gehen kann, und ich bin auf der Suche nach einer ansprechenden Art und Weise, um es mehr oder weniger Text

<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

Die Lösung zu machen fit Ich dachte mir ist wie folgt.

Von der übergeordneten Komponente, die eine Title-Komponente rendert, füge ich einen ref hinzu und füge einen resize eventlistener hinzu, der neue Requisiten an die ItemTitle-Komponente sendet.

<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>