el-
dropdown的内容
显示不全通常是因为内容过长导致文字换行与其他文字折叠展示。为了解决这个
问题，可以通过设置样式来实现文字溢出省略号，并在鼠标悬浮时
显示全部内容。具体的解决方案如下所示：
1. 使用CSS样式来控制内容的
显示方式。可以通过设置`white-space: nowrap;`来禁止文字换行，以及使用`overflow: hidden;`和`text-overflow: ellipsis;`来实现文字溢出时
显示省略号。
2. 在el-
dropdown-menu组件中添加鼠标悬浮时
显示全部内容的功能。可以使用element-ui提供的tooltip工具提示组件来实现，在el-
dropdown-
item上添加`:content="
item.regionName"`属性，并设置`effect="dark"`来实现鼠标悬浮时
显示全部内容。
下面是代码示例：
```html
<el-
dropdown-menu slot="
dropdown">
<el-
dropdown-
item class="region-
item-style" :command="
item.id" v-for="(
item, index) in region" :key="index" :title="
item.regionName">
<el-tooltip class="
dropdown-tooltip" :content="
item.regionName" placement="top" effect="dark">
<div class="
dropdown-
item-content">{{
item.regionName }}</div>
</el-tooltip>
</el-
dropdown-
item>
</el-
dropdown-menu>
```
```css
.region-
item-style {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.
dropdown-tooltip {
max-width: none;
}
```
通过上述代码，可以实现el-
dropdown的内容在超出长度时
显示省略号，并在鼠标悬浮时
显示全部内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [
Dropdown 下拉框（el-
dropdown-menu）内容过长
显示‘...’ 鼠标悬浮
显示全部](https://blog.csdn.net/migexiaoliang/article/details/126266310)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_
item style="max-width: 50%"]
- *3* [vue+element搭建后台小总结 el-
dropdown下拉功能](https://download.csdn.net/download/weixin_38724154/13676609)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_
item style="max-width: 50%"]
[ .reference_list ]
2505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
