Раскрывающийся список HTML (select) с переносом текста и границей после каждого значения (опция)

Я пытаюсь достичь двух вещей с выпадающим списком.

  • сначала я хочу обернуть текст в списке опций в раскрывающемся списке.
  • во-вторых, я хочу поставить границу после каждого варианта

и я хочу поддерживать IE (и другие браузеры тоже).

это потому, что у меня был бы длинный текст в раскрывающемся списке, и я не хочу их вырезать. По этой причине я хочу сделать вышеупомянутые вещи.

что-то вроде это:-

http://jsfiddle.net/fnagel/GXtpC/embedded/result/

выберите один с " То же самое с форматированием текста опции, выберите Адрес." Обратите внимание, как параметры форматирования и границы-дно с каждым из них.

вот что я пробовал (текст):-

<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
    <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
    <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
    <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

в CSS

.myselect {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myselect option {

    white-space: nowrap;
    width: 100%
         border-bottom: 1px #ccc solid; /* This doesn't work. */
}
7
border css drop-down-menu html

2 ответов

select {
    width:100px; 
    overflow:hidden; 
    white-space:pre; 
    text-overflow:ellipsis;
    -webkit-appearance: none;

}
option {
          border: solid 1px #DDDDDD; 
}
7

принятый в настоящее время ответ только усекает текст с многоточием и добавляет границу, которая не полностью решает проблему.

Я чувствую, что это более полный, более кросс-браузер совместимый ответ:сделать текст в select element wrap, когда слишком долго?

в двух словах, вы можете сделать это правильно, используя javascript, или сделать это легко... не очень совместимый способ с помощью свойства css white-space: pre-wrap на ваш выбор элементы.

Примечание: Если вы идете с помощью white-space: pre-wrap, обязательно добавьте -moz- и -o- браузерные префиксы.

вот что я придумал как быстрое, простое решение CSS (хотя jQuery, о котором я упомянул, более надежный и лучший):

select {
  width: 200px;
  max-width: 100%; /* So it doesn't overflow from it's parent */
}

option {
  /* wrap text in compatible browsers */
  -moz-white-space:pre-wrap; 
  -o-white-space:pre-wrap; 
  white-space:pre-wrap; 

  /* hide text that can't wrap with an ellipsis */
  overflow: hidden;
  text-overflow:ellipsis;

  /* add border after every option */
  border-bottom: 1px solid #DDD;
}
2