Vue3优化表单标签与布局,解决文字过长问题(附Demo)

目录

  • 前言
  • [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>

截图如下:(更加不美观,超出了弹框的限制)

相关推荐
贩卖纯净水.3 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果2 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长2 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store