My current challenge involves a table where a cell is represented as a link. Within this setup, I am incorporating html content into the text of the link:
<TableCell align="left" classes={{root: classes.cellPadding}}>
<Link className={classes.link} to="/">
<HtmlFormattedText html={oppgave.oppgave_tekst}/>
</Link>
</TableCell>
The HtmlFormattedText function appears as follows:
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from "@material-ui/core/styles/withStyles";
const HtmlFormattedText = ({classes, html, ...rest}) => {
return (
<span {...rest} className={`${classes.formattedText} ${classes.root}`} dangerouslySetInnerHTML={{__html: html}}></span>
);
};
HtmlFormattedText.propTypes = {
html: PropTypes.string.isRequired
};
const styles = (theme) => ({
formattedText: {
'& p': {
marginBlockStart: 0,
marginBlockEnd: 0
}
},
root: {
maxWidth: 200
}
});
export default withStyles(styles)(HtmlFormattedText);
I am currently grappling with the task of truncating long texts within the htmlInnerText and adding an ellipsis if the content exceeds the width limit of the cell. Despite setting the max-width for both the TableCell and HtmlFormattedText, the desired outcome has not been achieved. For further details, you can refer to the codesandbox demo available here. Any suggestions on how I can successfully implement text truncation with an ellipsis?