如何使用材质ui更改nowrap文本

Question

我想显示现在说唱文字，比如...我怎么能改变它通过使用材料UI

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    width: '100%',
    maxWidth: 500,
  },
});

export default function Types() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Typography noWrap variant="body1" gutterBottom>
        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis teneturunde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
      </Typography>
    </div>
  );
}

它像那样显示“身体1”。Lorem ipsum dolor坐在这里，奉献给我们。克罗斯·布兰迪特..."

但我想表现得像“身体1.洛雷姆·伊普苏姆·多洛·希特·阿梅特，奉献给精英们。库斯·布兰迪。。。더보기"

你能帮我吗？

Answer 1

您必须将“文本溢出”CSS属性设置为自定义字符串。

您可以使用材质UI的CSS覆盖，并使用“noWrap”键针对特定行为：

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    width: '100%',
    maxWidth: 500,
  },
  noWrap: {
    textOverflow: "'...더보기'",
  },
});

export default function Types() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Typography classes={{ noWrap: classes.noWrap }} noWrap variant="body1" gutterBottom>
        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis teneturunde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
      </Typography>
    </div>
  );
}

事实证明，只有Firefox才支持将“文本溢出”CSS属性设置为自定义字符串

此codesandbox将在Firefox中显示自定义省略号，但在Chrome中，文本溢出CSS属性将标记为“无效属性值”。