html - 如何在素材 UI 芯片中显示姓名和电子邮件？

Question

我正在使用 Material UI 芯片并排显示姓名和电子邮件。但是当 name 很大时，电子邮件会超出 chips 边界

这是我返回筹码的函数

  getGuestList() {
    let {guests} = this.state;
    let guestChips = [];
    let s = {overflow: 'hidden',width: '50%', display: 'inline-flex'}
    guests.map((guest, i) => {
      guestChips.push(
        <div key={i}>
          <Chip
            onRequestDelete={() => {this.removeGuest(i)}}
            style={{marginTop: 10, width: '225%'}}
            labelStyle={{width: '97%'}}
          >

          <div><div style={s}>
            <div style={{textOverflow: 'ellipsis'}}>
            {guest.name}
            </div>
          </div> | <div style={s}>{guest.email ? guest.email : ''}</div></div>
          </Chip>
        </div>
      )
    });

这会显示两者，但它们的宽度固定为 50%，因此如果电子邮件较小，则电子邮件一侧会留有空间，如果名称较小，则电子邮件一侧会留有空间。

有没有办法克服这个问题？

Answer 1

Sandeep，如果您打算将段落长度的文本放入芯片中，您应该考虑重新设计您的 UI，因为这不是 material-ui 芯片的用途，也不是 google Material 规范的用途.谁真的拥有最大字符数 (254) 的电子邮件？？

进入芯片组件的功能，它们的尺寸正确，没有您在该图像中向我展示的奇怪间距。但是，它们不是 flex 元素，因此没有响应。如果您仍然遇到 css 问题，则必须有一些您已经实现的自定义 css 覆盖了 material-ui 提供的内容并导致它中断。我附上了一张图片，显示我如何在我的代码中遇到您的风格问题。说到自定义 css，只需在芯片上设置最大宽度，然后使用文本溢出:省略号，就可以完全避免这整个问题。