Не разрешать раскрывающийся список для отображения полного текста
Можно ли отделить предварительный просмотр раскрывающегося списка от фактического текста раскрывающегося списка? У меня есть такой код, который я хочу отображать только при предварительном просмотре, но показывать полный текст при раскрытии раскрывающегося списка:
<option value = "">{"Lorem ipsum dolor sit".substring(0,15)+"..."}</option>
Как сделать так, чтобы предварительный просмотр в раскрывающемся списке не был полным текстом и ограничился добавлением "..." и чтобы этот текст отображался полностью после выбора раскрывающегося списка
Прошу прощения, если это сбивает с толку. Сложно объяснить, что мне нужно. Вот сценарий JS с тем, как выглядит мой код, чтобы помочь уменьшить путаницу.
http://jsfiddle.net/251s9tuf/1/
select {
width: 100px
}<select id='cboSelect'>
<option value = "the_value" label = "the text... displayed">the hidden text longer much longer text I want to be shown once dropdown is selected</option>
<option value = "the_value" label = "the text displayed2">the hidden text longer much longer text2</option>
</select>Я бы тоже выбрал индивидуальное решение, это сложно сделать с <select>, у вас нет надежных событий для открытия / закрытия. Эта рабочий пример - это то место, где я должен был, прежде чем сдаться, может дать вам несколько идей. jsfiddle.net/251s9tuf/4
Спасибо, Ирекен, я тоже подумал, что мне придется это сделать, но, похоже, это больше проблем, чем того стоит всего за несколько "...". Это был запрос моего начальника, но я просто рассказал ей о проблеме, связанной с этим материалом, и о том, насколько сложно / требует много времени для чего-то такого простого. Надеюсь, она понимает, но я обычно никогда не хочу говорить правду, потому что это иногда портит мою репутацию: | Я ценю помощь
Я просто дам вашему руководителю оценку и позволю ему выяснить, стоит ли это делать. Мы рады реализовать настраиваемые поля выбора, но это займет два дня!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что CSS позаботится об этом за вас в Firefox (но Chrome и Safari не уважают этот стиль на <option>).
select {
overflow: hidden;
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
}<select id='cboSelect'>
<option value = "the_value" label = "the text... displayed">the hidden text longer much longer text I want to be shown once dropdown is selected</option>
<option value = "the_value" label = "the text displayed2">the hidden text longer much longer text2</option>
</select>не совсем то, о чем спрашивал OP .... и я не вижу ... как предлагает ваш код. (Использование хрома)
О, ты прав. Это не работает в Chrome. Это сработало в FF. ?
Кажется, что Chrome уважает вырезка контента, однако он не добавляет многоточие и FWICT, это исторически было проблемой для тегов <option>. Тем не менее, похоже, что потребуется решение JS, чтобы заполнить пробел или списать его на прогрессивное улучшение.
Похоже, вы хотите закодировать элемент, который выглядит как select, поскольку с ним мало что можно сделать ...