ASP.NET CORE 选择助手如何更改选择选项字体大小？答案

【问题标题】：ASP.NET CORE select helper how to change select option font size?ASP.NET CORE 选择助手如何更改选择选项字体大小？
【发布时间】：2020-10-29 01:30:03
【问题描述】：

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

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

{版本：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>

控制器：

LongOptionTextList(DBObject.LongOptionText);

控制器功能：

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

【问题讨论】：

最后都是html所以是的，你可以使用css。
使用 boostrap，只需在该控件上设置所需的 REM 大小 - 也适用于复选框。我会创建您自己的具有所需大小的班级并将其添加到班级列表getbootstrap.com/docs/4.0/content/typography
似乎向选项添加样式的最佳位置是在将选项添加到选择列表的控制器函数中： LongOptionText.Add(new SelectListItem { Value = "1", Text = "很长的文字...", @style="font-size:smaller;"});不确定如何将 css 定位到带有长文本的选项？？

标签： c# asp.net-core model-view-controller html-helper netcoreapp3.1

【解决方案1】：

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

请检查以下示例：

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

输出如下：

如果您只想更改包含长文本的选项，您可以使用 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>

然后，结果如下：

【讨论】：