Vue3优化表单标签与布局，解决文字过长问题（附Demo）

目录

• 前言
• [1. 增加标签宽度（生效）](#1. 增加标签宽度（生效）)
• [2. 工具提示 Tooltip（勉勉强强）](#2. 工具提示 Tooltip（勉勉强强）)
• [3. 缩小字体（不生效）](#3. 缩小字体（不生效）)
• [4. CSS 控制换行（不推荐）](#4. CSS 控制换行（不推荐）)

前言

好不容易构思整个表单的布局，但是个别表单的文字过长，导致自动换行，遮挡另外的一些组件

以下内容将围绕实战进行优化

以左上角的文字进行调整：

<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，让标签有更多的空间显示内容

<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（勉勉强强）

类似这种方式：

<el-tooltip content="过道过窄隔贝放不下2台桥" placement="top" effect="dark">
  <span>过道过窄</span>
</el-tooltip>

3. 缩小字体（不生效）

以下对于博主不生效，存在被上一级的css覆盖现象，不过诸位可尝试下

通过减小标签字体的大小，使较长的文本能够适应单行显示

<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 控制换行（不推荐）

<style scoped>
.el-form-item {
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>

截图如下：

如果取消隐藏溢出，情况会是这样：

<style scoped>
.el-form-item {
  white-space: nowrap; /* 防止换行 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>

截图如下：（更加不美观，超出了弹框的限制）