一、css 一行文本超出...
p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
二、超出3行 ...
p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
三修改滚动条样式
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* Demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } /* Add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; } </style> <body> <div class="visible-scrollbar">0Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword </div> <div class="invisible-scrollbar">1Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword </div> <div class="mostly-customized-scrollbar"> 2Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br> And pretty tall<br> thing with weird scrollbars.<br> Who thought scrollbars could be made weeeeird?</div> </body> </html>
四、 三角形 （border 控制三角形的面积大小）
div { 0; height: 0; border: 5px solid transparent; border-top-color:red }
五、解析 get 参数
通过replace 方法获取url 中的参数 健值对，可以快速解析get参数。
const q = {}; location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v); console.log(q)
六、解析连接url
可以通过创建a标签 给a标签赋值href 属性的方式，获取到协议， pathname origin等location对象上的属性
const aEle = document.createElement('a')
aEle.href = '/test.html'
aEle.protocol
//"https:"
aEle.pathname
//"/test.html"
aEle.origin
//"https://www.baidu.com"
aEle.host
//"www.baidu.com"
aEle.search
//""
七、可编辑标签文字
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>
八、calc()函数
calc(100% - 200px);
九、 水平垂直居中
div { 100px; height: 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color:red }
父控制子居中
div { display: flex; justify-content: center; align-items: center; }
十、ios手机容器滚动条滑动不流畅
overflow: auto;
-webkit-overflow-scrolling:touch;