一、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;
width: 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 {
width: 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>
View Code
四、 三角形 （border 控制三角形的面积大小）
div {
width: 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()函数
width: calc(100% - 200px);
九、 水平垂直居中
div {
width: 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;