razor - cshtml 在 DropdownList 中隐藏溢出，但在鼠标悬停时显示

Question

我的 cshtml 视图中有一个下拉列表。但是有些字符串太长而不能在一行中显示。如下图所示：

我需要设置它，以便在下拉列表中只显示一定数量的字符，并且当鼠标悬停在整个字符串上时应该是场景，类似于工具提示文本。

<div class="span11">
        @Html.DropDownList("specificationList", new SelectList(ViewBag.Specifications, "SpecificationId", "Name", ViewBag.SpecificationId), new { @class = "dropdown-toggle" })
    </div>

Answer 1

使用 css 文本溢出：省略号

Answer 2

这里的困难在于 DropDownListFor 助手不允许在<option>标签上设置自定义属性。为了使您的工具提示起作用，您需要生成以下标记：

<select name="specificationId">
    <option value="1" title="some very long description">item 1</option>
    <option value="2" title="some very long description 2">item 2</option>
    <option value="3" title="some very long description 3">item 3</option>
    ...
</select>

为了实现这一点，您可以在视图中编写意大利面条代码以手动循环遍历模型的值（完全不推荐），或者编写一个自定义 HTML 帮助程序来允许您输出此标记。我已经展示了一个这样的助手的例子this post。还有here. 您当然可以调整帮助程序，以便如果项目的文本长于一定数量的字符，它将生成截断它。