Problem using the work-breake with Arabic language - css

Question

I have here list of cards that I want to be in Arabic language but it has a problem with continue the word, it takes like half the word letters on line then break the half on the next line, for example in arabic "بطر
يق"
A picture for example:
can you help me please
Please note that the code written in React.js
the code
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import { fontSize, textAlign } from '#material-ui/system';
import "../fonts/29LTAzer-Medium.ttf"
import "../Styles/card.css"
const useStyles = makeStyles({
overrides: {
MuiCardActions: {
root: {
display: 'flex',
alignItems:"center",
padding: 8,
flexDirection: "row-reverse",
},
}
},
card: {
width: 700,
height:250,
backgroundColor: "#009CA7",
color:"white",
borderRadius: 25,
margin: 15,
textAlign: 'right',
fontFamily:"LTAzer-Regular",
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
fontFamily: "LTAzer-Regular",
},
title: {
fontSize: 14,
color:"white",
fontFamily: "LTAzer-Medium",
},
pos: {
marginBottom: 12,
color:"white",
fontFamily: "LTAzer-Regular",
},
button:{
color:"white",
width:50,
marginLeft: 300,
fontSize: 15,
border: 3,
border: "solid #9DCB82",
textAlign: "center",
backgroundColor: "#9DCB82",
// paddingRight: 50,
flexDirection:"row-reverse",
fontFamily: "LTAzer-Regular"
},
desc:{
textAlign:"right",
direction:"rtl",
fontFamily:"LTAzer-Regular",
wordBreak:"break-all",
// overflowWrap:"break-word",
whiteSpace:"&nbsp",
wordWrap:"normal",
textOverflow:"ellipsis",
overflow:"hidden",
display:"-webkit-box",
// lineHeight:16,
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
},
name:{
fontFamily: "LTAzer-Medium",
}
});
export default function SimpleCard(props) {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
{props.cardType}
</Typography>
<Typography className={classes.name} variant="h5" component="h2">
{props.cardName}
</Typography>
<Typography className={classes.pos} color="textSecondary">
{props.cardDate}
</Typography>
<Typography className={classes.desc} variant="body2" component="p">
{props.cardDesc}
</Typography>
</CardContent>
<CardActions>
<Button className={classes.button} size="small">تفاصيل</Button>
</CardActions>
</Card>
);
}

Answer 1

I solved the problem by removing the wordBreak:"break-all"