不常见的css样式收集

1.强制不换行与自动换行
强制不换行

white-space:nowrap;

自动换行

word-wrap: break-word;
word-break: normal;

文本中带有换行符类型的换行

white-space: pre-line; 

2.超出两行显示省略号

{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

3.滚动条样式
/定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/

html[data-client-type='pc']::-webkit-scrollbar
{
  width: 8px;  
  height: 10px; 
  background:#534024;

}
/*定义滚动条轨道 内阴影+圆角*/
html[data-client-type='pc']::-webkit-scrollbar-track
{
  box-shadow:0px 1px 3px rgba(0,0,0,0.3) inset;
  border-radius: 10px;
  background-color: #ccc;
}

html[data-client-type='pc']::-webkit-scrollbar-thumb
{
  box-shadow:0px 1px 3px rgba(0,0,0,0.3) inset;
  border-radius: 10px;
  background-color:#534024;
}

4.输入框的placehold样式设置

div::-webkit-input-placeholder{}

5.移动端h5页面适配（scss写法）

$base-width: 750; //设计稿宽度
$n: $base-width / 100;
$max-width: 1000px;


html,body {
  margin: 0 auto;
  font-family: Arial;
  padding: 0;
  background: #000;
}
@media screen and (max-width: #{$max-width}) {
  html {
    font-size: calc(100vw / #{$n});
  }
}
@media screen and (max-width:320px) {
  html {
    font-size: calc(100vw / #{$n});
    .content .page_5 .code .code-num{
      font-size: 16px;
    }
  }
}
@media only screen and (min-device-width : 1000px )
and (max-device-width : 1024px){
  html {
    font-size: calc(800px / #{$n}) !important;
  }
}
@media only screen and (min-device-width : 1024px )
and (max-device-width : 1920px){
  html {
    max-width: 500px;
    font-size: calc(500px / #{$n}) !important;
  }
}

@function r($size) {
  @return #{($size/100)}rem
}

6.安卓部分手机点击蓝色高亮解决

div{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

7.字体渐变

background: -webkit-linear-gradient(bottom, #d7b97b, #fffdfd);
color: #ffffff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

8.背景重复显示

background: url(~@/assets/images/bg2.jpg) repeat;
background-size: 100% auto;

9.单词间距

word-spacing：单词间的间距
letter-spacing：字母间的间距

10.居中显示的三种方式

1.{
    display: flex;
    align-items: center;
    justify-content: center；
}
2.{
    margin:0 auto;
}
3.{
    position:absolute;
    top:50%
    left:50%;
    transform: translate(-50%,-50%);
}

11.文本修饰text-decoration

h1 {text-decoration:overline}//文本上面一条线
h2 {text-decoration:line-through}//文本中间一条线
h3 {text-decoration:underline}//下滑线
h4 {text-decoration:blink}//闪烁文本

12.字体阴影

text-shadow: 0px 1px 2px #000;

注：解决了您的问题的话，可以帮我点点赞哦，有问题可以加我qq一起探讨前端的问题哦