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>