React Material UI CardHeader переполнение заголовка точками

Question

Как я могу правильно добавить точки в заголовок в моем Cardheader, если он превышает родительскую ширину (Ширина карты). Пока что я сделал это:

  card: {
    width: 275,
    display: "flex"
  },

  overflowWithDots: {
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    width: '100px'
  }

  <Card className={classes.card}>
    <CardHeader
       title={
         <Typography gutterBottom variant="h6" component="h4" className={classes.overflowWithDots}>
        {movie.title}
        </Typography>
       }
   />

Это работает в некотором роде, но я должен сказать классу, чтобы он имел ширину 100 пикселей, пока он не добавит точки. Мне нужно добавить точки, если он превышает ширину родителей.

Answer 1

Проблема

Насколько я понимаю, вы ограничиваете размер Карты , в этом случае вы не можете разместить многоточие из-за того, что CardHeader отображается в html.

Компонент CardHeader отображается с элементом «root» и содержимым «."элемент. См. Ниже:

Типографика имеет встроенную опору для добавления точек noWrap . Чтобы свойство noWrap работало правильно, у нас есть следующие подходы.

Решение 1

Поведение CardHeader по умолчанию - использовать flex. Если вам это не нужно, используйте flex:

...

cardHeader: {
  display: "block",
  overflow: "hidden"
}

...

<CardHeader
  className={classes.cardHeader} 
  title={
        <Typography noWrap gutterBottom variant="h6" component="h4">
           A world wide web - the revolution
        </Typography>
        }
/>
...

Solution 2

Если вам нужно сохранить CardHeader с гибким поведением, в этом случае overflow необходимо применить к root и содержимому . Для доступа к элементам используйте свойство CardHeader classes , передав сгенерированный класс в свойство content.

...

cardHeaderRoot: {
  overflow: "hidden"
},
cardHeaderContent: {
  overflow: "hidden"
}

...

<CardHeader
  classes={{
           root: classes.cardHeaderRoot,
           content: classes.cardHeaderContent
         }}
  title={
        <Typography noWrap gutterBottom variant="h6" component="h4">
           A world wide web - the revolution
        </Typography>
        }
/>

...

Вот пример в песочнице.

Внимание

Имейте в виду, что при изменении поведения по умолчанию отрисовки компонентов во всем дереве компонентов могут возникнуть некоторые побочные эффекты.

В любом случае

Если у вас все еще есть проблемы дайте нам знать.

Answer 2

Типографика имеет встроенную опору для добавления точек. Вы можете просто добавить свойство noWrap в типографику. Он добавит точки в текст заголовка и в соответствии с шириной родительского компонента.

<Card className={classes.card}>
  <CardHeader
    title={
      <Typography gutterBottom noWrap variant="h6" component="h4">
        {movie.title}
      </Typography>
    }
  />
/>