Блог

Главная - Вопросы по программированию - ReactJS: Как обрезать метку, если это длинный текст в автозаполнении пользовательского интерфейса материала

ReactJS: Как обрезать метку, если это длинный текст в автозаполнении пользовательского интерфейса материала

#javascript #reactjs #ecmascript-6 #material-ui #frontend

Вопрос:

Я использую автозаполнение пользовательского интерфейса material… Я хочу обрезать метку, когда это длинный текст.

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

введите описание изображения здесь

Комментарии:

1. Вы можете использовать text-overflow: ellipsis в css для класса .MuiInputLabel-outlined.MuiInputLabel-shrink .. Рабочий пример: codesandbox.io/s/material-ui-autocomplete-forked-p4fd1

Ответ №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)}
Метки: ,