如何使用JS或CSS數據基礎在下拉菜單中顯示兩行數據（選擇框）

Question

我在下拉列表中選擇了這些數據（選擇框） 我選擇的值數據更改應該顯示爲兩行。在同一個下拉列表中。

<select id="q1"> 
    <option value="">Select</option> 
    <option value="1">In what city did you meet your spouse/significant other?</option> 
    <option value="2">In what city or town did your mother and father meet?</option> 
    <option value="3">In what city or town was your first job?</option> 
    <option value="4">What is the middle name of your oldest child?</option> 
    <option value="5">What is your maternal grandmothers maiden name?</option> 
    <option value="6">What is your oldest cousins first and last name?</option> 
    <option value="7">What school did you attend for sixth grade?</option> 
</select> 

價值變動應該在二線顯示，如果以適應單行中無法數據。 否則它應該出現在單行中。 我使用這個CSS： -

select { 
    border-left: 0 none; 
    border-right: 0 none; 
    border-top: 0 none; 
    min-height: 30px; 
    padding-left: 5px; 
    padding-right: 5px; 
    text-align: left; 
    max-width: 500px; 
} 

Answer 1

添加以下代碼，選擇CSS會顯示多行的內容。

word-break: break-word; 
white-space: normal; 

select { 
 
    border-left: 0 none; 
 
    border-right: 0 none; 
 
    border-top: 0 none; 
 
    min-height: 30px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    text-align: left; 
 
    max-width: 300px; 
 
    word-break: break-word; 
 
    white-space: normal; 
 
}

<select id="q1"> 
 
    <option value="">Select</option> 
 
    <option value="1">In what city did you meet your spouse/significant other?</option> 
 
    <option value="2">In what city or town did your mother and father meet?</option> 
 
    <option value="3">In what city or town was your first job?</option> 
 
    <option value="4">What is the middle name of your oldest child?</option> 
 
    <option value="5">What is your maternal grandmothers maiden name?</option> 
 
    <option value="6">What is your oldest cousins first and last name?</option> 
 
    <option value="7">What school did you attend for sixth grade?</option> 
 
</select>

Answer 2

請參考以下鏈接。

http://jsfiddle.net/243p5fzd/6/

select { 
    border-left: 0 none; 
    border-right: 0 none; 
    border-top: 0 none; 
    min-height: 30px; 
    padding-left: 5px; 
    padding-right: 5px; 
    text-align: left; 
    max-width: 200px; 
    word-break: break-word; 
    overflow-wrap: break-word; /*Mozilla */ 
    white-space: pre-wrap; /* css-3 */ 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
    white-space: -pre-wrap; /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    word-wrap: break-word; 

}