css 相关

背景渐变动画

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

用CSS动画实现省略号动画

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ani 2s infinite;
    content: "\20"; 
}
@keyframes ani {
    from {
        width: 4px;
    }
    to {
        width: 15px;
    }
}

新版清除浮动

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

通用媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

作者：poetries
链接：https://www.jianshu.com/p/e878122a92a3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

超出显示省略号

overflow: hidden;

        
            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-line-clamp: 2;


            -webkit-box-orient: vertical;

强制换行

 word-break: break-all; //只对英文起作用，以字母作为换行依据。
 word-wrap: break-word; //只对英文起作用，以单词作为换行依据。
 white-space: pre-wrap;

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

white-space:nowrap;// 是禁止换行。

overflow:hidden;

禁止换行 

转自:https://www.jianshu.com/p/e878122a92a3