前端技巧点

79 阅读1分钟

零宽字符

    const text_1= '零宽字符';
    const text_2= '零宽\u202e\u202e\u202e字符';
    console.log(text_1); // 零宽字符
    console.log(text_1.length); // 4
    console.log(text_2); // 零宽字符
    console.log(text_2.length); // 7
   // 解决
   const text = text_2.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, "");
   console.log(text.length); // 4

粘性布局

随着滚轮滚动 设置some类名的元素一直在顶部,以上一个设置overflow属性的父元素为准 如果没有则为body及可视区

文本描边(阴影)

.text {
    font-size: 24px;
    // -webkit 存在兼容问题
    -webkit-text-stroke: 1px saddlebrown;
    color: blanchedalmond;
}
<p class="text">Hello world</p>

image.png

收起展开动画