Material-UI 选择和选项组件中的单行省略号答案

【问题标题】：Single line ellipsis in Material-UI Select and option ComponentMaterial-UI 选择和选项组件中的单行省略号
【发布时间】：2018-03-07 21:18:00
【问题描述】：

我有一个包含多列的 TableHead 组件。其中之一是<Select>，以便您可以过滤表的内容（在我的情况下，该值是 4 个状态之一）。如果选项字符串比容器长，我想在选项字符串的末尾添加一个省略号。

我的问题是 material-ui 的样式被包裹在 Select 组件周围，所以无论我使用Styles 还是通过在标签内插入样式，它都不起作用。

我检查过，使用 Material-UI，noWrap 和 textOverflow: "ellipsis" 应该可以工作，但我无法确定正确的组合。

我的预期结果是，如果字符串大于其父级，则显示省略号。所以不要这样：

我想要一个简单的“Contrib...”（Material-UI Select 组件中的 svg 覆盖了文本...）

我尝试了许多不同的选项，但没有一个能如此明显地做任何事情，我一定是做错了什么。我尝试更改颜色以查看我的样式是否受到影响。

<Grid item sm={2} lg={2} style={{display: 'flex', alignItems:'center'}}>
    <Select native style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre" }}
            value={this.state.status}
            onChange={this.handleChange.bind(this, Filter.Status)}>
        {Object.keys(StatusFilter).filter(key => !isNaN(Number(StatusFilter[key]))).map(item => {
            return (<option key={item} value={StatusFilter[item]}>{this.getStatus(StatusFilter[item])}</option>);
        })}
    </Select>
</Grid>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

这里有两件事，首先本机选择无法添加省略号，因为文本溢出仅适用于块元素。见Is it possible to make text-overflow:ellipsis for select with css only?

如果您想以这种方式进行探索，还有inputProps 是一个可用于将属性传递给底层输入的对象。因此，如果您想为原生输入添加样式，您可以：

   <Select native inputProps={{ style: { width: 100 } }}>{...}</Select>

另一方面，如果您删除 native 属性，如果选择框小于文本，则默认情况下应应用省略号。

【讨论】：

谢谢！我所要做的就是从<Select> 组件中删除native 参数，将<option> 替换为<MenuItem>，并将最大宽度设置为右父级：maxWidth: '100%'

【解决方案2】：

在我的例子中，即使在非原生 Select 组件上也缺少省略号，这是因为 display: flex 样式应用于“MuiSelect-root”组件。

替换它 - 即用display:block - 并且省略号将在那里为您服务。

【讨论】：

【解决方案3】：

            <FormControl
              variant="outlined"
              margin="dense"
              className={classes.formControl}
              error={touched.test && Boolean(errors.test)}
              >
              <InputLabel id="demo-simple-select-outlined-label">Test</InputLabel>
              <Select
                labelId="demo-simple-select-outlined-label"
                id="demo-simple-select-outlined"
                value={course}
                name="test"
                onChange={handleChange}
                label="Test"
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value={1}>1</MenuItem>
                <MenuItem value={2}>2</MenuItem>
                <MenuItem value={3}>3</MenuItem>
                <MenuItem value={4}>4</MenuItem>
              </Select>
              <FormHelperText error={touched.test && Boolean(errors.test)}>{errors.test}</FormHelperText>
            </FormControl>

并添加类：表单控件：{ 宽度：“100%”， },

【讨论】：