css样式

1. css 一行文本超出...

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2.多行文本超出显示...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3.IOS 手机容器滚动条滑动不流畅

overflow: auto;
-webkit-overflow-scrolling: touch;

4.修改滚动条样式

隐藏 div 元素的滚动条

div::-webkit-scrollbar {
    display: none;
}

• div::-webkit-scrollbar 滚动条整体部分
• div::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条
• div::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb
• div::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
• div::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去
• div::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用 overflow-hidden 截掉滚动条部分。暴力且直接。

隐藏页面元素

• display-none: 元素不存在，从 dom 中删除
• opacity-0: 元素透明度将为 0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。
• visibility-hidden：元素隐藏，但元素仍旧存在，页面中无法触发该元素的事件。

contenteditable

html 中大部分标签都是不可以编辑的，但是添加了 contenteditable 属性之后，标签会变成可编辑状态。

<div contenteditable="true"></div>

不过通过这个属性把标签变为可编辑状态后只有 input 事件，没有 change 事件。也不能像表单一样通过 maxlength 控制最大长度

解析 get 参数

通过 replace 方法获取 url 中的参数键值对，可以快速解析 get 参数。

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);

 pointer-events: none; 穿透该元素，直接作用在其后面的元素上。

pointer-events: none; 是 CSS 中的一个属性，用于控制元素是否可以成为鼠标事件（如 click、hover 等）的目标。当该属性值设置为 none 时，表示元素及其子元素将不会响应任何鼠标事件。即使鼠标指针位于该元素上方，也不会触发相应的事件，而是穿透该元素，直接作用在其后面的元素上。

在上述对话中提到的场景中，给搜索图标设置 pointer-events: none; 主要是为了防止用户在点击搜索图标时影响到输入框的内容选择或其他交互行为。这样既能展示搜索图标，又不影响输入框本身的正常使用。

Css文本 自动换行

.remark-text {  
    word-break: break-all;  
    overflow-wrap: break-word;  
}