How to display a button only if text overflows

I have a component that needs to display a button if text overflows. Currently I have the text-overflow set as ellipsis and want to show a button after that.

This gets complicated because there is no fixed number of characters that are allowed or a particular size.

Anyway how can I check for this with React or SCSS?

Here is a sample of what I currently have:

const content = [
  'short string. No button should be displayed.',
  'Long string, please display button! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
]

const RenderString = ({content}) => {
  return (
  <div style={{ border: '1px solid blue' }}>
    <div className='limited-space'>
    {content}
   </div>
   <button>You should only see me if text is too long</button>
  </div>
  )
}

const App = () => {

  return (
  <div>
    {content.map((c, index) => <RenderString key={index} content={c}/>)}
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);
.limited-space {
  margin: 10px;
  padding: 10px;
  width: 400px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px red solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer

Source: this answer

const content = [
  'short string. No button should be displayed.',
  'Long string, please display button! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
]

const RenderString = ({content}) => {
  const [isOverflowing, setIsOverflowing] = React.useState(false);
  const widthRef = React.useRef(null);
  
  React.useEffect(() => {
    const el = widthRef.current;
    if(el.offsetWidth < el.scrollWidth){
      setIsOverflowing(true);
    }
  }, []);

  return (
  <div style={{ border: '1px solid blue' }}>
    <div className='limited-space' ref={widthRef}>
    {content}
   </div>
   {isOverflowing ? <button>You should only see me if text is too long</button> : null }
  </div>
  )
}

const App = () => {

  return (
  <div>
    {content.map((c, index) => <RenderString key={index} content={c}/>)}
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);
.limited-space {
  margin: 10px;
  padding: 10px;
  width: 400px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px red solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>