ReactJS：当它是材料ui自动完成中的长文本时如何修剪标签答案

【问题标题】：ReactJS: How to trim label when it is a long text in material ui autocompleteReactJS：当它是材料ui自动完成中的长文本时如何修剪标签
【发布时间】：2021-03-02 09:48:52
【问题描述】：

我正在使用材质 UI 自动完成...当标签为长文本时，我想修剪它。

    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => 
      <TextField {...params} label="This is very long 
      labellllllllllllllllllllllllllllllllllllllllllll" variant="outlined" />}
    />

【问题讨论】：

你可以在 css 中使用 text-overflow: ellipsis .MuiInputLabel-outlined.MuiInputLabel-shrink .. 工作示例：codesandbox.io/s/material-ui-autocomplete-forked-p4fd1

标签： javascript reactjs ecmascript-6 material-ui frontend

【解决方案1】：

您可以使用函数substring()。

该方法返回开始和结束索引之间的字符串部分，或到字符串的末尾。

const str = 'labelllllllllllll';

console.log(str.substring(0, 6));
// expected output: "label"

console.log(str.substring(2));
// expected output: "bel"

然后在您的文本字段中您可以使用：

label={str.substring(0, 6)}

【讨论】：