Question

我正在研究react组件，我需要将显示的文本限制在基于输入组件而更改的字段中。当文本框输入变得比组件的宽度更长时，我试图这样做，以显示可以适合的后跟...。我有一些有用的东西，但它使用width：field来设置文本的宽度，我正在寻找一种响应方式，使其适合或多或少的文本

  <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，它将新的props发送到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>

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

1 个答案: