你所不知的CSS 2019-07-11 html5 CSS3 约 265 字 预计阅读 1 分钟 文章目录 获取伪元素的属性值 设置伪元素的属性值 前言 收录一下 CSS 技巧吧 单行多行截取文本 1 2 3 4 5 6 /* 单行截取 */ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 1 2 3 4 5 6 7 8 /* 多行移动端适用 */ { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列 -webkit-line-clamp: 3; //这个属性适合WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器 } 操作伪元素(pseudo-element) 获取伪元素的属性值 1 2 3 4 5 //获取before伪元素的字号大小 var div = document.querySelector("div"); var fontSize = window .getComputedStyle(div, "::before") .getPropertyValue("font-size"); 设置伪元素的属性值 1 2 3 4 5 6 7 <p data-foo="hello">world</p> <style> p:before { content: attr(data-foo); } </style> <!-- attr()支持多个连写,而且attr()内可以是DOM元素的任意属性 --> 参考文档 你所不知道的 css 文章作者 Mr.Wang 上次更新 2019-07-12 许可协议 CC BY-NC-ND 4.0