Разрыв строки в HTML Выберите опцию?

Question

Могу ли я иметь двухстрочный текст в опции выбора HTML? Как?

Answer 1

Я знаю, что это старый пост, но я оставляю его для всех, кто заглядывает в будущее.

Вы не можете форматировать разрывы строк в опциях; тем не менее, вы можете использовать заголовок attibute, чтобы дать всплывающую подсказку, чтобы дать полную информацию. Используйте короткий дескриптор в тексте опции и укажите полный заголовок в названии.

<option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!">1</option>

Answer 2

Нет, браузеры не предоставляют эту возможность форматирования.

Возможно, вы могли бы подделать его с некоторыми флажками с <label> s и JS, чтобы превратить его в всплывающее меню.

Answer 3

Как насчет помещения длинного текста в другой <option> прямо внизу и его отключения? Может быть, это обходной путь для кого-то, размещающего здесь.

        <select>
            <option>My real option text</option>
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and my really really long option text that is basically a continuation of previous option)</option> 
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and still continuing my previous option)</option> 
            <option>Another real option text</option>
        </select>

Answer 4

Немного хак, но это дает эффект многострочного выбора, добавляет серый bgcolor для вашей многострочной, и если вы выбираете любой из серого текста, он выбирает первый из группировки. Вроде умный скажу :) Первый вариант также показывает, как можно добавить тег заголовка для параметра.

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }

<select name="select1" id="select1" onchange="SelectFirst(this.value)">
  <option value="1" title="this is my long title for the yes option">Yes</option>
  <option value="2">No</option>
  <option value="2,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for the no option</option>
  <option value="2,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the no option</option>
  <option value="3">Maybe</option>
  <option value="3,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for Maybe option</option>
  <option value="3,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the Maybe option</option>
  <option value="3,3" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 3 for the Maybe option</option>
</select>

Answer 5

HTML-код

<section style="background-color:rgb(237.247.249);">
    <h2>Test of select menu (SelectboxIt plugin)</h2>
    <select name="select_this" id="testselectset">
        <option value="01">Option 1</option>
        <option value="02">Option 2</option>
        <option value="03">Option 3</option>
        <option value="04">Option 4</option>
        <option value="05">Option 5</option>
        <option value="06">Option 6</option>
        <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
        <option value="08">Option 8</option>
        <option value="09">Option 9</option>
        <option value="10">Option 10</option>
    </select>
</section>

Код Javascript

$(function(){
    $("#testselectset").selectBoxIt({
        theme: "default",
        defaultText: "Make a selection...",
        autoWidth: false
    });
});

Код CSS

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
    width: 400px; /* Width of the dropdown button */
    border-radius:0;
    max-height:100px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

и вам нужно добавить библиотеку Jquery выберите Box Jquery CSS

Jquery Ui Min JS

SelectBox Js

Пожалуйста, проверьте эту ссылку JsFiddle Link

Answer 6

Не работает полностью (строчная часть hr ) во всех браузерах, но вот решение:

<select name="selector">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option disabled><hr></option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>

Answer 7

Если вы просто хотите, чтобы в выпадающем списке был разрыв строки, используйте это:

<option label="" value="" disabled=""> </option>

Answer 8

Вместо этого, возможно, попробуйте заменить выбор на разметку, например

// Wrap any selects that should be replaced
$('select.replace').wrap('<div class="select-replacement-wrapper"></div>');

// Replace placeholder text with select's initial value
$('.select-replacement-wrapper').each(function() {
	$(this).prepend('<a>' + $('select option:selected', this).text() + '</a>');
});

// Update placeholder text with updated select value
$('select.replace').change(function(event) {
  $(this).siblings('a').text( $('option:selected', this).text() );
});

/* Position relative, so that we can overlay the hidden select */
.select-replacement-wrapper {
  position: relative;
  border: 3px solid red; /* to show area */
  width: 33%;
  margin: 0 auto;
}

/* Only shows if JS is enabled */
.select-replacement-wrapper a {
  /* display: none; */
  /* Notice that we've centered this text - 
   you can do whatever you want, mulitple lines wrap, etc, 
   since this is not a select element' */
  text-align: center;
  display: block;
  border: 1px solid blue;
}

select.replace {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border: 1px solid green;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<select id="dropdown" class="replace">
  <option value="First">First</option>
  <option value="Second" selected>Second, and this is a long line, just to show wrapping</option>
  <option value="Third">Third</option>
</select>

Answer 9

да, с использованием стилей css пробел: предварительная упаковка;в классе .dropdown загрузчика, переопределив его.Раньше это пробел: nowrap;так что это делает выпадающий список в одну строку.предварительная упаковка делает это в соответствии с шириной.