css - 如何使用数据的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>