通过减小字体大小和截断文本来使文本适合容器内

Question

I have to fit text within a div container which is square. If the text is too large to fit within the container, I have to reduce the font-size from 32px to 18px. And even if that is not fitting, I have to truncate the text with "...". It looks simple enough. I am using plain JavaScript / React.

There are some approaches that I am trying.

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

If the clientHeight < scrollHeight, the text overflows, hence I reduce the font size.

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

I am setting a style on the container based on the state changes.

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

I like to reduce to truncate the text if it still overflows. Not sure how to truncate the text.

Code snippet so far:

 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

This can be done by updating the component text till it fits. And then finally setting the state. The code snippet is shown below.

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

Keep reducing the text till it fits and finally update the state.

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