ASP.NET CORE select helper 如何更改 select 选项字体大小？

Question

如何使用 ASP.NET CORE select 助手更改 select 选项的字体大小？

这段代码工作正常，除了长文本在浏览器 select 中被截断。 如何使长文本的选项具有较小的字体大小？ （我可以使用 select 辅助标签控制选项样式吗？）

{版本：netcoreapp3.1、Microsoft.EntityFrameworkCore 3.1.5、Microsoft.VisualStudio.Web.CodeGeneration.Design 3.1.3、VS Enterprise 2019 16.6.3}

看法：

<div class="form-group">
   <label asp-for="LongOptionText" class="control-label"></label>
   <select asp-for="LongOptionText" class="form-control" asp-items="@ViewBag.LongOptionText">
   </select>
  <span asp-validation-for="LongOptionText" class="text-danger"></span>
</div>

Controller：

LongOptionTextList(DBObject.LongOptionText);

Controller Function：

private void LongOptionTextList(int? selectedLongOptionText)
{
    List<SelectListItem> LongOptionText = new List<SelectListItem>();
    if (selectedLongOptionText == null || selectedLongOptionText == 0)
    {
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Select a Long Text" });
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Long Text {Default}", Selected = true });
    }
    else
    {
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Select a Long Text" });
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Long Text {Default}" });
    }

    LongOptionText.Add(new SelectListItem { Value = "1", Text = "Very Long Text that needs to be made small to display properly" });
    LongOptionText.Add(new SelectListItem { Value = "2", Text = "Not so long text" });
    LongOptionText.Add(new SelectListItem { Value = "3", Text = "More Not so long text" });


    if (selectedLongOptionText != null & selectedLongOptionText != 0)
    {
        foreach (var item in LongOptionText)
        {
            if (Convert.ToInt32(item.Value) == selectedLongOptionText)
            {
                item.Selected = true;
                break;
            }
        }
    }

    ViewBag.LongOptionText = LongOptionText;
}

Answer 1

我们可以通过设置 CSS font-size属性来更改 Select 元素和选项字体大小。

请检查以下示例：

<style>
    select {
        font-size: 8px !important;
        text-overflow: ellipsis;
    }
    select option{
        font-size:10px;
    }
</style>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label asp-for="LongOptionText" class="control-label"></label>
                    <select asp-for="LongOptionText" class="form-control select" asp-items="@ViewBag.LongOptionText"></select>
                    <span asp-validation-for="LongOptionText" class="text-danger"></span>
                </div>
            </div>
        </div>

output如下：

如果您只想更改包含长文本的选项，您可以使用 JQuery 循环通过选项，然后添加或删除小号样式。

示例如下：

<style> 
    .smallsize { 
        font-size:8px !important; 
    } 
</style>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label asp-for="LongOptionText" class="control-label"></label>
                    <select asp-for="LongOptionText" class="form-control select" asp-items="@ViewBag.LongOptionText"></select>
                    <span asp-validation-for="LongOptionText" class="text-danger"></span>
                </div>
            </div>
        </div>  
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
    jQuery(document).ready(function () {
        var maxLength = 50;
        //if the text is too long, change the select option font size,
        $('.select > option').text(function (i, text) {
            if (text.length > maxLength) {
                $(this).addClass("smallsize"); 
                //used to add ellipsis. if the text is very very long, we could add ellipsis.
                //return text.substr(0, maxLength) + '...';
            }
            else {
                $(this).removeClass("smallsize"); 
            }
        }); 
        //change the select font size
        $(".select").change(function () {
            var select = $(".select"); 
            //check the selected option text, then based on the text length to set font-size
            if (select.find("option:selected").text().length > maxLength) { 
                select.addClass("smallsize");

                //used to add ellipsis. if the text is very very long, we could add ellipsis.
                //return text.substr(0, maxLength) + '...';
            }
            else {
                select.removeClass("smallsize"); 
            }
        });
    });
</script>

然后，结果如下：