通过减少字体大小和截断文本来适应容器中的文本

Question

我必须在一个正方形的div容器中放入文本。如果文本太大而无法容纳在容器中，我必须将字体大小从32px减小到18px。即使这不合适，我也必须用“......”截断文本。看起来很简单。我使用的是纯JavaScript / React。

我正在尝试一些方法。

<div className="container" ref={c => { this.comp = c; }}>
  {text}
</div>

如果clientHeight <scrollHeight，文本溢出，因此我减小了字体大小。

if (this.comp.clientWidth < this.comp.scrollHeight) {
  this.setState({ overflow: true });
}

我根据状态更改在容器上设置样式。

style={this.state.overflow ? { fontSize: 18 } : undefined}

我喜欢减少截断文本，如果它仍然溢出。不确定如何截断文本。

到目前为止的代码段：

class App extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    if (this.comp.clientHeight < this.comp.scrollHeight) {
      console.log('reducing font size from 32px to 18px');
      this.setState({ overflow: true });
    }
  }
  
  render() {
    const { overflow } = this.state;
    return (
      <div className="container" 
           ref={c => { this.comp = c; }} 
           style={overflow ? { fontSize: 18 } : undefined}
      >
        This is a long text which wont fit within the container. Inspite of reducing the font size, it wont fit. And I want to truncate with ellipsis. It is not possible with text-overflow as it is multi-line text. How do I figure how many characters to truncate it to?
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

.container {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #fafafa;
  padding: 10px;
  font-size: 32px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Answer 1

这可以通过更新组件文本直到它适合来完成。然后最终设置状态。代码段如下所示。

class App extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    let overflow;
    if (this.comp.clientHeight < this.comp.scrollHeight) {
      overflow = true;
      this.comp.style.fontSize = '18px';
    }
    let truncatedText;
    while (this.comp.clientHeight < this.comp.scrollHeight) {
      const words = this.comp.innerText.split(' ');
      words.pop();
      truncatedText = words.join(' ') + '...';
      this.comp.innerText = truncatedText;
    }
    this.setState({
      overflow,
      truncatedText
    });
  }

  render() {
    const {
      overflow,
      truncatedText
    } = this.state;
    const text = 'This is a long text which wont fit within the container.Inspite of reducing the font size, it wont fit.And I want to truncate with ellipsis.It is not possible with textoverflow as it is multiline text.How do I figure how many characters to truncate it to.';
    
    return ( <div className = "container"
      ref = {
        c => {
          this.comp = c;
        }
      }
      style = {
        overflow ? {
          fontSize: 18
        } : undefined
      }>
      {truncatedText || text} 
      </div>
    );
  }
}


ReactDOM.render( <App /> , document.getElementById('root'));

.container {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #fafafa;
  padding: 10px;
  font-size: 32px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

继续减少文本直到它适合并最终更新状态。

    let truncatedText;
    while (this.comp.clientHeight < this.comp.scrollHeight) {
      const words = this.comp.innerText.split(' ');
      words.pop();
      truncatedText = words.join(' ') + '...';
      this.comp.innerText = truncatedText;
    }