大选择选项下拉列表中的文本剪切答案

【问题标题】：Text Cutting inside Large Select Option Dropdown大选择选项下拉列表中的文本剪切
【发布时间】：2019-07-05 22:57:08
【问题描述】：

我正在制作一个充满表单元素的 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;
}

我尝试了一些解决方案，但它们对我不起作用。

缩小字体：

增加下拉菜单的高度或自动设置高度：

我正在寻找这个问题的解决方案，但在 Stack Overflow 中没有找到任何帮助。能解决吗？

谢谢

【问题讨论】：

标签： html css select html-select

【解决方案1】：

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

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

【讨论】：

请用一些示例代码扩展它以显示您的意思
嗨，sneha，感谢您的回复。删除高度属性后，下拉列表变得很大，下拉列表中有额外的间距，我无法增加高度，因为所有类型的输入、复选框和收音机看起来都很好。
嗨@SaurabhLP，您希望字体大小仅为5vh 还是可变的？
嗨 Sneha，是的，我也想要 5vh 的字体大小。
完成@AonghasM。谢谢

【解决方案2】：

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

.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;
}

【讨论】：

嗨，Karthik，不幸的是，它应该可以工作并且应该可以解决我的问题。但很抱歉，它根本不起作用。在我的情况下，行高根本不起作用......
请您与其他输入元素分享您想要的屏幕截图..
我有。请看问题。
请用其他元素截图（例如文本框和任何其他元素）只是想比较其他元素之间的设计..这就是为什么

【解决方案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>

【讨论】：

【解决方案4】：

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

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>

没有设置高度：

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>

【讨论】：

嗨 Helenesh，感谢您的回复。实际上，问题仅与选择下拉菜单有关。所有类型的输入字段、复选框和收音机看起来都很好。增加选择下拉菜单的高度会使布局不对齐。我需要一些特定于选择下拉列表的东西。
@SaurabhLP 然后您可以只定位选择框。我已经更新了我的答案以反映这一点。
嗨，Helenesh，15vh 太大了。我不能应用它。我只想要 5vh 内的所有内容。有什么解决办法吗？
我已经更新了我的答案。请查看差异。
@SaurabhLP 如果将行高设置为 5vh 会怎样？我想你已经尝试过了？另外，您的新屏幕截图不清楚。你没有说问题是什么。