how to change nowrap text by using Material-ui

Question

I want to show nowrap text like ...더보기 not ..., how can i change it by using 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>
  );
}

it shows like that "body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blandit..."

but i want to show like that "body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blandit ...더보기"

could you help me?

Thomas Hennes Thomas Hennes · Accepted Answer · 2019-07-21T10:20:52

You have to set the 'text-overflow' CSS property to your custom string.

You can use Material-UI's CSS overrides and use the 'noWrap' key to target that specific behavior:

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>
  );
}

It turns out setting the 'text-overflow' CSS property to a custom string is only supported in Firefox

This codesandbox will display the custom ellipsis in Firefox, but in Chrome the text-overflow CSS property will be tagged as 'invalid property value'.

how to change nowrap text by using Material-ui

1 Answers