选择器多选时选项超出文本框

作者: 莘栀 | 来源:发表于2021-01-10 21:33 被阅读0次

选择器多选时选项超出文本框
Spring MVC 表单标签库
UI元素状态伪类选择器
mysql中set多选项类型的数据解析原理
让Dev-C++支持C99标准的设置方法
[ue4]UMG文本框实现自动换行
iOS单选和多选的优雅实现
选择困难症者，怎么治
input的代码类
HTML 表单应用

Element ui 选择器进行多选时，选择项若比所设置的框体宽，默认不会自动换行,这样的话，界面样式会不好看，解决办法是加个样式

代码:

<el-form-item label="活动区域">
  <el-select v-model="form.region"
    placeholder="请选择活动区域"
    multiple>
    <el-option label="特别长的一个文本，超过了文本框的长度" value="shanghai2"></el-option>
    <el-option label="区域一" value="shanghai"></el-option>
    <el-option label="区域二" value="beijing"></el-option>
    <el-option label="区域三" value="天津"></el-option>
  </el-select>
</el-form-item>

出问题的效果

select_problem.png

样式代码

.el-tag {
  height: 100%;
  white-space: normal;
}

解决效果

select_answer.png

选择器多选时选项超出文本框
Element ui 选择器进行多选时，选择项若比所设置的框体宽，默认不会自动换行,这样的话，界面样式会不好看，解...
Spring MVC 表单标签库
文本框密码处理文本域复选框复选框（多选）单选按钮多项单选按钮下拉选项列表多选框隐藏字段域错误处...
UI元素状态伪类选择器
:focus选择器 :focus选择器被用来指定“表单元素”获得光标焦点时使用的样式，主要在单行文本框text、多...
mysql中set多选项类型的数据解析原理
一、set多选项类型的应用形式 set类型通常用于存储表单中的“多选项”的值。设定形式：set(‘选项值1’, ‘...
让Dev-C++支持C99标准的设置方法
step 1: 工具 > 编译选项 > 编译器选项卡中，在“编译时加入以下命令”复选框前打勾 > 在下方的文本框中...
[ue4]UMG文本框实现自动换行
选择下图类型的文本框。然后改成这个选项。
iOS单选和多选的优雅实现
选择器（collectionView 单选、多选）（tableView 单选、多选）在项目工程中用的最多的就是...
选择困难症者，怎么治
我们总以为自己喜欢选择，并且喜欢拥有更多的选项。但是，当我们真得拥有很多选择时，会是一件好事吗？拥有很多选择时，我...
input的代码类
账号框密码框下拉列表选项1 选项2 选项3 单选男：女：多选 A B C 按钮...
HTML 表单应用
账号框密码框下拉列表选项1 选项2 选项3 单选男：女：多选 A B C...