开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下 每天梳理一个场景，知识点查漏补缺，充实满足。

正文

背景

在(一)中介绍了下css怎么实现省略号，实际项目中遇到的场景可能不会这么最简单，会遇到限制字数，或者宽度不固定的情况，这篇文章介绍下通过offsetWidth来显示省略号(js+css)。

实现

text-overflow:ellipsis 必须要设置宽度才能生效。遇到宽度不固定，css是直接做不了的，这种方式只能通过js+css解决

offsetWidth来获得元素宽度

根据我们的交互可以测出，一行最多展示多少个字，超出加省略，最基础的就是取字段的.length获得长度。但是如果页面要自适应，宽度是可调节的怎么办，这里介绍的是offsetWidth获取元素宽度的形式。 （基本实现也还是css来实现省略号，假设宽度是不固定的，而且可以随着屏幕大小变化，主要也是通过js判断的，获取动态宽度，通过这个比较字符长度，超出即为元素赋上省略号的class）

// 获取元素宽度offsetWidth
const target = document.querySelector(targetElement);
const eleWidth = target.offsetWidth;
// 通过判断宽度超出来设置css样式
if(length > wnlWidth){
// 显示省略号
}else{
// 不显示
}

总结

更文真的是对自己的一个挑战，从开始的没有方向，到现在开始有头绪进行系列更文了，更新一些我项目实际遇到的问题以及解决方案，也是对知识点进行一个归纳总结，当做给自己的盘点笔记，顺带找资料查漏补缺。