Блог

Я использую пользовательский интерфейс Material в качестве основы компонента дизайна для приложения React. Внутри приложения находится куча карточек с изображением и некоторым текстом. Я использую calc, чтобы получить ширину изображения, чтобы высота отображалась в соотношении 4:3 примерно так

 <CardMedia
  className={classes.cardMedia}
  style={{ height: `calc(${width}px * 0.75)` }}>
  <Image
    src={image}
    alt="Text"
    layout="fill"
    objectFit="cover"
    priority
  />
</CardMedia>
 

В приложении также есть точки останова для отображения разного количества карт в каждой строке в зависимости от разрешения. Довольно стандартные вещи.

Проблема, с которой я сталкиваюсь и для которой я изо всех сил пытаюсь найти приемлемое решение, связана с шириной.

С многоточием в пользовательском интерфейсе Material ему требуется фиксированное значение ширины, например width: 200px , вместо чего-то гибкого , например width: '100%' , чтобы многоточие отображалось и текст не переносился на другую строку. На данный момент я использую calc() для вычисления ширины, как показано ниже, что нормально при загрузке страницы, но очень медленно вычисляет обновленную ширину, если вы измените размер окна браузера, а также измените ширину карты.

 <div
  style={{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    width: `calc(${width}px - 35px)`,
  }}>
  <Typography noWrap gutterBottom variant="h5">
    {address}
  </Typography>
</div>
 

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