js如何实现当文本内容过长时，中间显示省略号...,两端正常展示

主要观点总结

文章介绍了一个前端功能，即实现一个标题内容过长时，前后端展示完整内容，中间省略的效果。文章涵盖了实现思路、代码示例和相关知识点。

关键观点总结

关键观点1: 实现思路

获取标题盒子的真实宽度，通过计算文本的实际宽度与盒子宽度的对比，来判断文本是否超出盒子宽度，并计算截取位置的索引。

关键观点2: 代码实现

包括HTML结构、CSS样式和JavaScript代码。JavaScript代码中涵盖了获取盒子宽度、检测dom元素宽度、计算文本长度、设置文本内容等功能的实现。

关键观点3: 相关知识

介绍了判断文字被溢出隐藏的几种方法，包括使用Element-plus框架、创建隐藏的div模拟实际宽度、使用canvas的measureText方法和TextMetrics对象、使用css实现等。还介绍了JS获取字符串长度的几种常用方法，包括通过charCodeAt判断字符编码和将双字节字符替换成"aa"的做法。