项目需求

模块内文本内容不超出时，正常显示，没有文本提示
模块内文本内容超出容器宽度时，隐藏超出文本，hover时显示所有文本信息

需求分析

1. 文本的隐藏，使用css样式控制
2. 文字提示使用Element UI的tooltip组件
3. 问题在于，既然是用css控制的文字隐藏，那么如何在vue文件中进行判断，因为组件的使用场景不同，而且容器宽度一般都是适应屏幕，在不能使用字符串长度进行判断的情况下如何确定文本是否超出。

功能实现

1. 文本隐藏
   单行的文本隐藏，可以很简单的使用css来实现，多行的文本隐藏，目前我已知的样式中，只支持webkit内核，如果需要考虑兼容性，单纯的css可能无法实现

   1 2 3 4 5 6 7 8 9 10 11 12 13

   //单行 .text-hidden { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } //多行 .text-multi { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //限制为2行 overflow: hidden; }

2. 文本提示框
   使用‘Element UI Tooltip’组件

   1 2 3

   <el-tooltip effect="dark" content="提示文字" placement="top"> <el-button>Tooltip</el-button> </el-tooltip>

3. 显示判断
   对于控制tooltip的显示隐藏，使用el-tooltip自带的disabled属性。
   在鼠标移入组件时，使用 scrollWidth 和 offsetWidth 进行判断，当文本超出时，滚动区域的宽度会大于容器宽度。
   在多行的换行中，容器宽度一致，需要使用高度来进行判断。

4. 代码(不含css)

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

   <template> <div :class="['tooltip-box', 'w-100', {'h-100' : !multi}]" @mouseenter="handleShowTooltip($event)"> <el-tooltip :disabled="showTooltip" :content="text" placement="top"> <div :class=" multi ? 'text-multi' : 'text-hidden'">{{text}}</div> </el-tooltip> </div> </template> <script type="text/javascript"> export default{ data(){ return { showTooltip: false } }, props : { text : String, // 切换 单/多行 multi: { type : Boolean, default: false } }, methods: { handleShowTooltip(event){ let cell = event.target.querySelector('.el-tooltip'); this.showTooltip = cell.scrollWidth === cell.offsetWidth && cell.scrollHeight === cell.offsetHeight; } } } </script>