前言
在后台管理系统的开发中，我们经常会遇到表单数据过长导致页面布局被撑坏的问题。特别是在详情弹窗中，如果某个字段的值特别长，很容易将容器撑开，影响页面美观和用户体验。
本文将以实际项目中的需求为例，分享如何在 Vue + Element Plus 项目中优雅地解决文本溢出问题，并实现鼠标悬浮时显示完整内容的交互效果。
目录
[1. CSS text-overflow 属性](#1. CSS text-overflow 属性)
[2. 文本溢出省略的三大要素](#2. 文本溢出省略的三大要素)
[3. HTML title 属性](#3. HTML title 属性)
[4. Vue 样式绑定](#4. Vue 样式绑定)
需求场景
在用户详情页中，有一个"用户住址"字段，该字段的值可能很长（比如"XXX省XXX市XXX县XXXXXXXX"这样的长文本），如果直接显示会导致页面布局错乱。
需求如下：
-
文本过长时，自动截断并显示省略号
... -
不能撑开父容器
-
鼠标悬浮在截断文本上时，显示完整内容
实现方案
第一步：文本溢出省略
使用 CSS 实现单行文本溢出省略，核心样式如下：
css
display: inline-block; /* 或 block */
width: 100%; /* 或固定宽度 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 强制不换行 */这四个属性缺一不可，需要同时使用才能生效。
第二步：悬浮显示完整内容
使用 HTML 的 title 全局属性，当鼠标悬停时浏览器会自动显示提示框。
html
<span :title="fullText">{{ displayText }}</span>完整代码
修改前（存在问题）
html
<el-form-item label="用户住址" label-width="150px">
<span class="field-value">{{ formData.location|| '-' }}</span>
</el-form-item>这种写法没有任何溢出处理，文本过长时会直接撑开容器。
修改后（完美解决）
html
<el-form-item label="用户住址" label-width="150px" style="width: 33.33%;">
<span
class="field-value"
style="display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
:title="formData.location|| '-'"
>
{{ formData.location|| '-' }}
</span>
</el-form-item>代码解析
-
style="width: 33.33%;"：限制表单项宽度为父容器的三分之一 -
display: inline-block：让span支持宽高设置 -
width: 100%：让文本容器占满父级宽度 -
overflow: hidden：超出部分隐藏 -
text-overflow: ellipsis：超出部分显示省略号 -
white-space: nowrap：文本强制不换行 -
:title="formData.bnftOwnTypeName || '-'"：鼠标悬浮时显示完整内容
效果展示
文本正常长度时
用户住址：北京市朝阳区奥森公园文本过长时
用户住址：北京市昌平区回龙观大街...鼠标悬浮时会弹出完整内容：北京市昌平区回龙观大街霍营街道龙跃苑东三区
知识点总结
1. CSS text-overflow 属性
| 属性值 | 说明 |
|---|---|
clip |
溢出的文本被裁剪，不显示省略号（默认值） |
ellipsis |
溢出的文本显示为省略号 ... |
2. 文本溢出省略的三大要素
要实现文本溢出省略，必须同时满足三个条件：
css
/* 1. 容器必须有宽度限制 */
width: 100%;
/* 2. 溢出隐藏 */
overflow: hidden;
/* 3. 强制不换行 */
white-space: nowrap;3. HTML title 属性
title 是全局属性，几乎所有 HTML 标签都支持。当鼠标悬停在元素上时，浏览器会显示 title 属性的值作为提示信息。
Vue 中使用：
html
<!-- 静态值 -->
<span title="完整内容">截断内容...</span>
<!-- 动态值 -->
<span :title="fullText">截断内容...</span>4. Vue 样式绑定
Vue 中绑定样式有多种方式：
方式一：直接在标签中使用 style
html
<span style="color: red;">文字</span>方式二：动态绑定 style 对象
html
<span :style="{ color: 'red', fontSize: '14px' }">文字</span>方式三：使用 class 类名（推荐用于复杂样式）
html
<span class="text-ellipsis">文字</span>
.text-ellipsis {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}优化建议
如果项目中多处需要使用文本省略功能，建议封装为全局样式类：
css
/* 全局样式文件 */
.text-ellipsis {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}使用时只需添加类名：
html
<span class="text-ellipsis" :title="text">{{ text }}</span>注意事项
-
text-overflow: ellipsis只对块级元素或inline-block元素生效 -
容器必须有明确的宽度限制（
width、max-width或flex-basis等） -
使用
title属性时，如果内容为空，建议显示-占位符
结语
本文介绍了在 Vue + Element Plus 项目中处理文本溢出问题的完整方案。通过 CSS 的 text-overflow: ellipsis 配合 title 属性，轻松实现了文本截断和悬浮提示功能，既保证了页面布局的整洁，又提升了用户体验。
这个小技巧在实际开发中非常实用，希望能帮助到遇到类似问题的开发者。