如何使用 Material-ui 更改 nowrap 文本

Posted 2023-03-30

【中文标题】如何使用 Material-ui 更改 nowrap 文本

【英文标题】：how to change nowrap text by using Material-ui

【发布时间】：2019-11-29 13:55:16

【问题描述】：

我想显示 nowrap 文本，例如 ...더보기 not ...， 我怎样才能通过使用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 ...더보기”

你能帮帮我吗？

【参考方案1】：

您必须将 'text-overflow' 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>
  );

事实证明，将 'text-overflow' CSS 属性设置为自定义字符串 is only supported in Firefox

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

【讨论】：

感谢您的回答，但它不起作用。它还显示... codesandbox.io/embed/material-demo-befn3

三件事不对劲：1. 最重要的，'text-overflow' 设置为自定义字符串仅在 Firefox 中受支持，2. 我忘记在自定义周围加上一组额外的引号样式定义中的字符串，以及 3. 您忘记将“noWrap”样式类添加到 Typography 组件。有关详细信息，请参阅更新的答案。恐怕唯一的解决方法是编程，这意味着您必须自己操作字符串。