Question

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

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

我检查了材料用户界面，您可以noWrap和textOverflow: "ellipsis"工作，但我无法找到正确的组合。

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

我想要一个简单的“贡献......”（来自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>

Answer 1

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

如果您想要探索这种方式，还有inputProps这是一个可用于将属性传递给基础输入的对象。因此，如果要将样式添加到本机输入，您可以：

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

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

Answer 2

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

替换它 - 即用 display:block - 和省略号将为您服务。

Answer 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>

并添加类： formControl：{ 宽度：“ 100％”， }

Material-UI Select中的单行省略号和选项Component

3 个答案: