0

我想显示 nowrap 文本，例如 ...더보기 不是 ...，我如何使用 material-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>
  );
}

它显示为“body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blandit...”

但我想这样展示“body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blandit ...더보기”

你可以帮帮我吗？

4

1 回答 1

1

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

您可以使用 Material-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 属性设置为自定义字符串

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

于 2019-07-21T10:20:52.960 回答