I have a ponent 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 plicated 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 modo 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=".8.0/umd/react.production.min.js"></script>
<script src=".8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

I have a ponent 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 plicated 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 modo 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./ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

• javascript
• css
• reactjs
• sass

3 Answers 3

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 modo 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./ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

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 modo consequat.'
]

const isOverflow = (e) => {
  return e.offsetWidth < e.scrollWidth
}

const RenderString = ({content}) => {
  const textContainerRef = React.useRef()
  const [showButton, setShowButton] = React.useState(false);
  // When ponent renders
  React.useEffect(() => {
      setShowButton(isOverflow(textContainerRef.current))
  }, [])
  
  return (
  <div style={{ border: '1px solid blue' }} >
    <div className='limited-space' ref={textContainerRef} >
      {content}
      
    </div>
    {showButton && <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./ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Try the following:

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 modo consequat.'
];

const RenderString = ({content}) => {
  const ref = React.useRef(null);
  
  const [displayButton, setDisplayButton] = React.useState(false);
  
  React.useLayoutEffect(() => {
    const container = ref.current.getBoundingClientRect();
    const text = ref.current.firstChild.getBoundingClientRect();
    setDisplayButton(text.width > container.width);
  }, []);
  
  return (
    <div style={{border: '1px solid blue'}}>
      <div ref={ref} className='limited-space'>
        <span>{content}</span>
      </div>
      {
        displayButton ? <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./ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="app"></div>