如何在 React/CSS 或 Material UI 中按行高的倍数截断文本？ [复制]

Question

我在 Material UI 中创建了一张包含文本的卡片。我想修复卡片的高度，如果超过 3 行，则将其中的文本截断。最好的方法是什么？

下面是我的代码，如您所见，我尝试使用 CSS 来执行此操作，但是 (a) 省略号不显示 (b) 溢出会在水平方向切掉文本，所以我会喜欢有办法通过线高的倍数而不是像素来做到这一点。如果显示器尺寸调整，我也希望它仍然可以工作。

import React from 'react';

// Material UI
import {
  Card,
  CardActionArea,
  CardContent,
  CardMedia,
  makeStyles,
  Typography,
} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  media: {
    height: 140,
  },
  title: {
    height: 50,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },  
  description: {
    height: 50,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
}));

const ContentThumbnail = ({ image, title, description, date }) => {
  const classes = useStyles();
  return (
    <Card>
      <CardActionArea>
        <CardMedia
          image={image}
          title=""
          className={classes.media}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2" className={classes.title}>
            {title}
          </Typography>
          <Typography variant="body2" component="p" className={classes.description}>
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
};


export default ContentThumbnail;

Answer 1

很遗憾，您不能在多行上添加省略号，它适用于每条水平线。

一种解决方法是在显示省略号之前计算您可以拥有的符号总数。

在您的代码中，您可以拥有

const [description, setDescription] = useState('');
const MAX_SYMBOLS_ALLOWED = 50;

useEffect(() => {
  if(description.length >= MAX_SYMBOLS_ALLOWED) {
    // 3 is for the number of dots ( the elipsis )
    const transformed = description.substr(0, MAX_SYMBOLS_ALLOWED - 2);

    setDescription(`${transformed}...`)
  }

}, [description])

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>