如何在ASP.NET中处理下拉列表控件中的长文本

3
我有一个下拉列表,由数据库填充。它的值字段包含记录的ID,其选项字段包含记录的文本。但是记录的文本条目非常长,使下拉列表变得非常宽,完全改变了我的网页的外观。当我缩小宽度时,也会缩小显示的文本。有没有办法让网页看起来好看,同时仍然允许用户查看完整的文本(例如换行、滚动或类似的东西)? 我该如何处理这个问题?

<asp:DropDownList ID="SelectPost" ToolTip="Choose the Post for an Indent" runat="server" Width="200px"/> - Jesse Mwangi
6个回答

5

尝试使用CSS为下拉菜单添加固定宽度,例如:

select {width: 150px}

虽然下拉菜单本身的宽度是固定的,可能无法显示所有文本,但选项元素应该扩展到最宽元素的宽度。

在IE7及以下版本可能无法正常工作,在这种情况下,此链接可能对这些浏览器有所帮助:


当列表是多选项时会发生什么?这种类型的项目始终处于“打开”状态,CSS宽度适用于其打开的宽度。 - Jason

3

您可以考虑设置固定宽度,然后设置title属性以提供工具提示功能,这样当鼠标悬停时,文本就会显示出来。

在绑定/填充下拉列表后,您可以为每个项目设置自己的文本title属性:

foreach (ListItem li in ddl.Items)
{
    li.Attributes.Add("title", li.Text);
}

我很久以前做过这个,但在我的代码中找不到它。谢谢你的提醒! - Joshua Hudson

0

如果文本非常错误,我认为您可能需要考虑一种不同的方法,而不仅仅是在DropDownList中显示所有内容。

您可以让DropDownList仅显示文本的一小部分作为摘要,然后在用户更改项目时在列表旁边显示完整文本。我建议使用AJAX来保持用户体验良好。

为此,请将DropDownList和列表右侧的Label包装在一个UpdatePanel中。然后,DropDownList的onSelectedIndexChanged事件将类似于以下内容:

protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e)
{
   var item = _DB.GetItemFromDB(DropDownList1.SelectedValue);
   Label1.Text = item.Text;
}

0
一个令人愉悦的替代方案是只在您的列中显示部分文本,再加上一个按钮或某种图形,表明他们可以通过将鼠标悬停在单元格上或点击某个东西来查看更多内容。
例如:
Name | Id   | Cover Letter
----- ------ ----------------------------------------------------
Rex  | 1000 | I am seeking opportunities in t... (click for more)

你可以手写代码,但是有很多工具可以使这变得容易,特别是如果你熟悉 JQuery。我在浏览 JQuery windows and overlays plugins 时发现了以下内容:


0
你考虑过显示一些初始字符,然后在选择该项时使用工具提示来显示完整字符串吗?

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接