c# - ASP.NET CORE 选择助手如何更改选择选项字体大小?
问题描述
如何使用 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;
}
解决方案
font-size
我们可以通过设置 CSS属性来更改 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>
然后,结果如下:
推荐阅读
- powershell - 停止时使用 FtpWebRequest 超时 FTP 上传
- python-3.x - 以循环方式生成列表的子集
- javascript - Firebase 模拟器验证测试 - 使用 initializeAdminApp 时间戳时出错
- azure - 无法成功将参数传递给链接的 ARM 模板
- python-3.x - 在没有pylint抱怨的情况下向覆盖的函数添加额外的参数
- sql - add_months 的替代方案
- java - 有没有办法将数组中的元素组合起来并将其放回同一个数组中?
- python - 每次我用python运行代码时,文件地址都会在vscode终端中重复
- python - SQL Server 和 PyODBC
- php - 无法将最大文件大小上传增加到 2gb 以上