说在前面的话
我不管你有没有用过layui 组件库，咱必须承认layui表格中的一些设计还是很贴心的，就比如说数据表格中单元格数据超出的时候，使用展示更多按钮的方式，点击展示更多的按钮就会出现个弹窗在弹窗里面展示单元格中的全部内容。
在数据表格中可以用这种方式来展示更多？那么咱举一反三一下，“能不能在表格之外的也使用这种方式来展示更多信息呢？比如说标题过长呢？”爱思考的产品经理睁着大眼睛望着俺。
这大眼小可爱咱能不答应吗？只能乖乖安排上了。
磨刀不误砍柴工（逻辑分析）
- 当对应元素内的文字没有超出元素宽度的时候，不需要展示更多按钮
- 当文字超出元素的宽度的时候，鼠标不放到元素上面的时候只展示省略号（...），鼠标放到上面的时候在元素右侧展示更多按钮
- 移开元素，更多按钮消失
- 若点击更多按钮则在点击按钮的下方展示出带关闭的弹窗，弹窗内容为元素里面的全部内容。
核心代码
css部分
使用样式对超出的部分进行省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- overflow: hidden;//内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。
- text-overflow: ellipsis;//这个关键字会用一个省略号（...）来表示被截断的文本。
- white-space: nowrap;//连续的空白符会被合并，换行符会被当作空白符来处理,文本内的换行无效。
以上的样式总的来说就是标签元素中文字会在一行展示，如果超出标签元素的宽度则用（...）表示还有更多内容。
js部分
let _width = $(this).width();//得到标签元素的宽度
let _scrollWidth = $(this).get(0).scrollWidth;//得到标签元素的滚动宽度
if (_scrollWidth > _width) {//有省略内容没有展示出来
//todo 展示更多按钮
}
通过滚动宽度和元素宽度的对比来判断是否有省略的内容。
<div class="lw-show-more">展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件
展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件展示更多插件11</div>
使用独有的类名称来对标签元素添加上展示更多的功能 该插件用 lw-show-more
总结
根据现象来罗列逻辑，再将自然语言逻辑转换成代码语言，刚入门的时候喜欢马上动手，积累经验之后喜欢分析之后再开工。
