Menu
For a reactjs app, I use Material-ui (https://material-ui.com/) for the design. And I need to write text in card that match exactly 2 lines.
What I've already done works when text can be contained in 2 or 1 lines, but for longer text, the cut becomes before word and it is not ellipsis.
Here what I've done
<Box
fontSize="h5.fontSize"
component="div"
overflow="hidden"
textOverflow="ellipsis"
height={70}
>
{title}
</Box>
The result is good on the first card, for on the second one, the last word 'Floooooo' is displayed in the hidden part (the third line) but not in the second line with ellipsis. I've tried to add whiteSpace="nowrap" but the text is only 1 line height (fig 2) 
Can you help me please?
850
We use the word–break property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The word–wrap property is used to split/break long words and wrap them into the next line.
To create line breaks in HTML, use the <br> tag. There is no closing tag necessary. In the code above, there will be a line break between "125 N 6th St" and "Brooklyn, NY 11249" that won't have the outrageous amount of space that appears between two paragraph elements. It'll just be a nice line break!
To line break with Typography, set the display prop to block, which will break the line before the text inside.
You can use CSS rule -webkit-line-clamp: 2 in conjuction with word-break: break-all
const useStyles = makeStyles({
root: {
maxWidth: 300,
},
media: {
height: 100,
},
customBox: {
display: "-webkit-box",
boxOrient: "vertical",
lineClamp: 2,
wordBreak: "break-all",
overflow: "hidden"
}
});
function App() {
const classes = useStyles();
const title = "pos2 test long Flooooooooooooooooooooooooooooooooooo";
return (
<Card className={classes.root}>
<CardMedia
className={classes.media}
image="https://via.placeholder.com/300x100"
/>
<CardContent>
<Box
fontSize="h5.fontSize"
component="div"
classes={{root: classes.customBox}}
>
{title}
</Box>
</CardContent>
</Card>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { Box, Card, CardContent, CardMedia, makeStyles } = MaterialUI;
</script>
</body>
<Typography
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
}}>
overflowing text...
</Typography>
'sx' is a property that works in newer version of MUI
32
Try like this:
<CardContent style={{width: "auto"}}>
<Box
fontSize="h5.fontSize"
component="div"
overflow="hidden"
whiteSpace="pre-line"
textOverflow="ellipsis"
height={70}
>
{title}
</Box>
</CardContent>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
