下拉框文本过长折行显示

下拉筛选框的下拉选择项有字数很长的情况，实现当字数过长时，文本折行显示

vue项目中使用elmentui的下拉框组件。但是下拉框的样式，不在el-select的DOM里面，而是放在了最外层。直接修改下拉框样式不会生效，查看
elementui的官方文档，发现 popper-append-to-body这个属性，使用他就可以把下拉框放在el-select的dom元素里，再通过后代选择器修改样式即可。
要实现下拉框中文本过长折行显示，代码如下：


<el-selectv-model="form.source"placeholder="请选择"size="small":popper-append-to-body="false"
><el-optionv-for="item in sourceList":key="item.value":label="item.value":value="item.index"></el-option>
</el-select>//样式修改部分
.el-select .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item{            white-space: pre-wrap;color: #606266;height: auto;font-weight: normal;
}
.el-select .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item.selected{            background: #0090FF;color: #fff;font-weight: 700
}

要实现下拉框中文本过长显示省略号且悬浮显示，代码如下：
一定要添加title属性，这是悬浮显示的内容。

<el-selectv-model="form.source"placeholder="请选择"size="small"style="width:100px;"
><el-optionv-for="item in sourceList":key="item.index":label="item.value":value="item.index"class = "optionsContent":title="item.value"></el-option>
</el-select>//样式修改部分
.optionsContent{max-width: 100px;
}

下拉框文本过长折行显示相关推荐

vue element 下拉框内容过长显示...鼠标悬浮显示全部
1.1. css 多选下拉框内容过长-用...代替 /*下拉选择框-多选-内容过长-用...代替 begin */ .el-tag.el-tag--info {background-color: ...
vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果如下图: 关键代码如下:
编程案例——layui的table表格并获取选中的数据、layui监控select下拉框并将隐藏的div显示
layui table表格展示效果代码前端代码后端代码:我们需要注意后端给前端返回数据的格式获取radio标签所对应的数据条目问题描述解决办法 layui监控select下拉框并将隐藏的 ...
el-select 下拉框选项过长
很多时候下拉框的内容是不可控的,如果下拉框选项内容过长,势必会导致页面非常不协调,解决办法就是,单行省略加文字提示. <el-select popper-class="popper-c ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
Android实现生肖特征查询，intent实现下拉框文本传递
Android实现生肖特征查询 MainActivity package com.example.graceto.shiyan2;import android.app.Activity; import ...
vue select下拉框数据v-model绑定默认不显示的问题
提高页面加载速度,前端代码注意的关键点今天遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示.我写的原始代码如下: <sel ...
通过select下拉框里的value控制div显示与隐藏
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
文本域自定义下拉框支持模糊检索关键字高亮上下选择
转载自:文本域自定义下拉框支持模糊检索关键字高亮上下选择一.需求需要创建一个常见问题库,填写存在问题时可以下拉选择,可以模糊搜索,也可以手写.如果选择了问题库中的内容,自动填充内容到存在问 ...

下拉框文本过长折行显示

下拉框文本过长折行显示相关推荐

最新文章

热门文章