在开发过程中经常会遇到空间太小文字展示不全的问题，对于一些数据可能影响不大，但对于一些数据描述开头都是一样结尾不同的可能就没办法区分了。解决办法：通过鼠标划入展示全部文字的效果用来解决。

一、通过:title 实现鼠标划入展示对应信息的效果

title属性的定义和用法

title 属性规定关于元素的额外信息。

这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

<div title="鼠标划入显示我的信息">你好</div>

二、添加文本太长显示省略号

width: 400px;//设置宽度overflow: hidden;//溢出隐藏text-overflow: ellipsis;//属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。white-space: nowrap;//只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。

width: 400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

三、配合使用，实现功能

添加cursor: pointer;属性鼠标划入显示小手，提高交互效果

<template><div title="鼠标划入显示我的信息" class="title">你好你好你好你好</div></template><script>export default {name: "HomeView",components: {},data:()=>{return {title:'鼠标划入显示我的信息'}}};</script><style>.title {width: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;}</style>