大选择选项下拉列表中的文本切割

Question

我正在制作一个充满表单元素的UI，我希望所有元素都是大尺寸元素。但下拉确实是切割中的文本问题。没有行高，没有填充能够解决问题。我在我的应用程序上使用Bootstrap v3作为UI框架。我正在使用Open Sans字体。

这是它的样子：

这是代码，我正在使用：

HTML：

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

CSS：

label {
    font-size: 2.8vh;
    display: block;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
}
.form-control {
    padding-top: 0;
    padding-bottom: 0;
    height: 5vh;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

我尝试了一些解决方案，但它们不适合我。

减少字体：

增加下拉高度或使高度自动增加：

我寻求的解决方案这个问题，但没有帮助我在堆栈溢出找到。难道解决？

谢谢

Answer 1

1. 您可以增加选择框的高度，如下所示：

select.form-control  { //only targets select boxes with a class of form-control
    padding-top: 0;
    padding-bottom: 0;
    height: 15vh; //or min-height: 15vh; 
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

2. 如果没有设置高度：

select.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

Answer 2

.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

您可以通过增加表单控件的高度或从表单控件中删除height属性来修复此问题，以便选择字段高度环绕文本。

Answer 3

删除了height: 15vh;，它按预期工作。希望这可以帮助。谢谢

label {
    font-size: 2.8vh;
    display: block;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
}
.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

Answer 4

在选择框中使用line-height:5vh而不是height。它可能会解决问题。

.form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 5vh;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}