10个前端技巧

一、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>

View Code

四、三角形（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;