目录
- 前言
- [1. 增加标签宽度(生效)](#1. 增加标签宽度(生效))
- [2. 工具提示 Tooltip(勉勉强强)](#2. 工具提示 Tooltip(勉勉强强))
- [3. 缩小字体(不生效)](#3. 缩小字体(不生效))
- [4. CSS 控制换行(不推荐)](#4. CSS 控制换行(不推荐))
前言
好不容易构思整个表单的布局,但是个别表单的文字过长,导致自动换行,遮挡另外的一些组件
以下内容将围绕实战进行优化
以左上角的文字进行调整:
html
<el-form-item label="过道过窄隔贝放不下2台桥" prop="passageTooNarrow">
<el-select v-model="formData.passageTooNarrow" placeholder="" clearable>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HAS_SHIP_DATA)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
尝试了多种方案,最终才有成效
对于其他的方式,诸位也可尝试下
1. 增加标签宽度(生效)
通过增加 el-form-item 的 label-width,让标签有更多的空间显示内容
html
<el-form-item label="过道过窄隔贝放不下2台桥" prop="passageTooNarrow" label-width="150px">
<el-select v-model="formData.passageTooNarrow" placeholder="" clearable>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HAS_SHIP_DATA)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
截图如下:
通过扩大 label-width,标签获得更多显示空间,减少换行情况
这种方法适用于表单项标签长度各不相同的场景,但需要确保整体表单布局不会因此变得太宽
2. 工具提示 Tooltip(勉勉强强)
类似这种方式:
html
<el-tooltip content="过道过窄隔贝放不下2台桥" placement="top" effect="dark">
<span>过道过窄</span>
</el-tooltip>
3. 缩小字体(不生效)
以下对于博主不生效,存在被上一级的css覆盖现象,不过诸位可尝试下
通过减小标签字体的大小,使较长的文本能够适应单行显示
html
<el-form-item label="过道过窄隔贝放不下2台桥" prop="passageTooNarrow" style="font-size: 12px;">
<el-select v-model="formData.passageTooNarrow" placeholder="" clearable>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HAS_SHIP_DATA)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
4. CSS 控制换行(不推荐)
css
<style scoped>
.el-form-item {
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
</style>
截图如下:
如果取消隐藏溢出,情况会是这样:
css
<style scoped>
.el-form-item {
white-space: nowrap; /* 防止换行 */
text-overflow: ellipsis; /* 显示省略号 */
}
</style>
截图如下:(更加不美观,超出了弹框的限制)