使用阿拉伯语工作休息的问题

Question

我这里有我想要使用阿拉伯语的卡片列表，但是在继续这个词时有问题，它需要在线上一半的单词字母然后在下一行打破一半，例如在阿拉伯语中“ ??? 嗳”

以图片为例：

你能帮我吗

请注意用 React.js 编写的代码

代码

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

我通过删除 wordBreak:"break-all" 解决了这个问题