3

可能重复：
对太宽的下拉菜单项的建议？

我有一个由数据库填充的下拉列表。它的 value 字段包含记录的 id，它的 option 字段包含记录的文本。但是记录的文本条目很长，使下拉列表如此之宽，以至于它完全改变了我网页的外观。当我减少宽度时，它也会减少显示的文本。有什么方法可以让网页看起来不错，并且仍然允许用户查看全文（如换行、滚动或类似的东西）？

我该如何处理？

4

6 回答 6

5

尝试使用 CSS 为下拉列表添加固定宽度，例如：

select {width: 150px}

虽然下拉菜单本身将具有固定宽度并且可能不会显示所有文本，但选项元素应扩展到最宽元素的宽度。

可能无法在 IE7 及以下版本中运行，在这种情况下，此链接可能对这些浏览器有用：

于 2009-07-12T16:50:03.900 回答
2

您可以考虑设置固定宽度，然后设置标题属性以提供工具提示类型的功能，以便在将鼠标悬停时显示文本。

绑定/填充下拉列表后，您可以将每个项目的标题属性设置为自己的文本：

foreach (ListItem li in ddl.Items)
{
    li.Attributes.Add("title", li.Text);
}
于 2009-07-12T17:25:37.043 回答
0

如果文本非常错误，我认为您可能必须考虑一种不同的方法，而不是仅将其全部显示在DropDownList.

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

为此，请将列表右侧的DropDownListand a包裹在 an 中。然后， onSelectedIndexChanged 事件将如下所示：LabelUpdatePanelDropDownList

protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e)
{
   var item = _DB.GetItemFromDB(DropDownList1.SelectedValue);
   Label1.Text = item.Text;
}
于 2009-07-12T17:03:23.593 回答
0

一个令人愉快的替代方法是仅显示列中的部分文本，加上一个按钮或某种图形，表明他们可以通过将鼠标悬停在单元格上或单击某些内容来查看更多内容。

例如：

Name | Id   | Cover Letter
----- ------ ----------------------------------------------------
Rex  | 1000 | I am seeking opportunities in t... (click for more)

您可以手动编写代码，但是有很多工具可以让这变得简单，特别是如果您对 JQuery 很熟悉的话。我发现以下只是快速浏览 JQuery窗口和覆盖插件：

于 2009-07-12T17:05:39.487 回答
0

您是否考虑过显示最初的几个字符，然后在选择项目时使用工具提示显示完整的字符串？

于 2009-07-12T17:11:11.567 回答
0

我不久前写了这篇文章，您可能会觉得有帮助：http ://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

这是一个 jquery 插件，用于制作由隐藏的选择元素支持的可样式化无序列表。

源码在github上：https ://github.com/tncbbthositg/GiantDropdown

于 2012-06-26T16:04:29.540 回答