Javascript 反应物料UI卡片标题溢出带点

如果标题超过父项宽度（卡片宽度），如何在标题中正确添加点。到目前为止，我已经做到了：

  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>
       }
   />

卡：{
宽度：275，
显示：“flex”
},
布满圆点：{
textOverflow:'省略号'，
空白：“nowrap”，
溢出：“隐藏”，
宽度：“100px”
}

---

这在某种程度上是可行的，但我必须告诉类的宽度为100px，直到添加点为止。我需要添加点，如果它超过了父母的宽度。

排版有一个内置的道具来添加点。您可以简单地将noWrap道具添加到排版中。它将根据父组件宽度在标题文本中添加点

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

/>

排版有一个内置的道具来添加点。您可以简单地将noWrap道具添加到排版中。它将根据父组件宽度在标题文本中添加点

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

/>

问题 据我所知，您正在限制卡的大小，在这种情况下，由于卡头在html中呈现的方式，您无法放置省略号

CardHeader组件由“根元素和“内容元素”呈现。见下文：

排版有一个内置的道具，可以添加点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>
        }
/>
...

。。。
卡片头：{
显示：“块”，
溢出：“隐藏”
}
...
...

解决方案2 如果需要使用flex行为保留CardHeader，在这种情况下，溢出需要应用于根和内容。要访问元素，请使用将生成的类传递给content prop。

。。。
cardHeaderRoot：{
溢出：“隐藏”
},
CardHeader内容：{
溢出：“隐藏”
}
...
...

下面是沙箱中的一个示例

暗示 请注意，通过修改组件渲染方式的默认行为，整个组件树中可能会出现一些副作用

无论如何 如果您还有任何问题，请告诉我们。

问题 据我所知，您正在限制卡的大小，在这种情况下，由于卡头在html中呈现的方式，您无法放置省略号

CardHeader组件由“根元素和“内容元素”呈现。见下文：

排版有一个内置的道具，可以添加点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>
        }
/>
...

。。。
卡片头：{
显示：“块”，
溢出：“隐藏”
}
...
...

解决方案2 如果需要使用flex行为保留CardHeader，在这种情况下，溢出需要应用于根和内容。要访问元素，请使用将生成的类传递给content prop。

。。。
cardHeaderRoot：{
溢出：“隐藏”
},
CardHeader内容：{
溢出：“隐藏”
}
...
...

下面是沙箱中的一个示例

暗示 请注意，通过修改组件渲染方式的默认行为，整个组件树中可能会出现一些副作用

无论如何

---

如果您还有任何问题，请告诉我们。

它超出了宽度。它超出了您的示例工作的宽度，我可能认为它没有。所以我尝试了一下，这是因为我的卡片中有

display:flex

。有没有一种方法可以将它与flex结合起来？这看起来像是在使用flex，这样你就必须确保溢出应用于整个flex树。因此，应用溢出：隐藏到您的CardHeader根。这样，如果您不需要flex那样的标准CardHeader行为，也可以使用最适合您的组件的技术@User13262487非常感谢，因此通过使用root:和content:我可以覆盖此特定组件的默认行为？是的。我加快了答案。如果你对这个话题还有疑问，让我们知道。你的例子有效，我可能认为它没有。所以我尝试了一下，这是因为我的卡片中有

display:flex

。有没有一种方法可以将它与flex结合起来？这看起来像是在使用flex，这样你就必须确保溢出应用于整个flex树。因此，应用溢出：隐藏到您的CardHeader根。这样，如果您不需要flex那样的标准CardHeader行为，也可以使用最适合您的组件的技术@User13262487非常感谢，因此通过使用root:和content:我可以覆盖此特定组件的默认行为？是的。我加快了答案。如果你对这个话题还有疑问，请告诉我们。