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

Question

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

Answer 1

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

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

Answer 2

Я знаю, что это более старое сообщение, но я оставляю это для тех, кто еще смотрит в будущее.

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

<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 3

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

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 4

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 библиотеки select Box Jquery CSS

Jquery Ui Min JS

SelectBox Js

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

Answer 5

Как насчет сдачи длинный текст в другом <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 6

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

<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

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

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() { 
 
\t $(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>