Троеточие в multi-select

Question

Подскажите пожалуйста как сделать троеточие в multi-select (библиотека: react-select), что бы туда прятать те опции, которые не помещаются в длину селекта, что бы они не переносились на новую строку. Не знаю как к этой библиотеке применить text-overflow: ellipsis.

`import Select from 'react-select'

function Selector ({label, onInput, value, multiple, options}) {

return

  <Select options={options} onChange={onInput} isMulti={multiple} value={value} controlShouldRenderValue={true}/>  
</div>

}

Selector.defaultProps = { label: '', options: [], multiple: false, // value:'' }

export default Selector`

Answer 1

А-а, так вы о этих "селектах". Да ещё и выпадающем. Дабы вы знали на будущее... практически все формы стилизуются весьма плохо. Это так сказать "наследие" от операционных систем ведущее к браузеру, где каждый со своими дефалтными тараканами, а дальше: "вы, дизайнеры, должны страдать".)

Раньше было ещё хуже. Однако, с годами ситуация потихоньку улучшалась, и, хотя ещё далека от совершенства, но всё же меняется.

Вернёмся к вашему элементу. Но приведу его на двух примерах одновременно.

select {
  width: 150px;
  vertical-align: top;
}

option {
    overflow: hidden;
    text-overflow: ellipsis;
}

<select name="multi" size="2" >
  <option value="very-long">Очень длинный текст скрываемый за многоточием</option>
  <option value="long" disabled="">Здесь текст не такой длинный</option>
</select>

<select name="open">
  <option value="very-long">Очень длинный текст скрываемый за многоточием</option>
  <option value="long" disabled="">Здесь текст не такой длинный</option>
</select>

P.S. есть сторонние библиотеки элементов форм. Появился Shadow DOM, позволяющий написать эти формы самому на свой вкус. Но, если для вас ситуация с сокращением текста критична, а изучать и копаться в этом не хочется то можно исправить и обычным сокращением текста при помощи js. Если кратко и по смыслу, а не по полному действию то как-то так:

let long = "Очень длинный текст скрываемый за многоточием";
let short = long.slice(0,19) + '...';
console.log(short);

БЛОГ НА HUSL

Троеточие в multi-select

Ответы (1 шт):