CSS单行省略和多行省略方法

单行显示省略css样式：
　　overflow: hidden;
　　white-space: nowrap;
　　text-overflow: ellipsis;

多行省略：

　　方法一、
　　intwoline1 {
　　　　display: block;
　　　　display: -webkit-box;
　　　　max-width: 400px;
　　　　height: 109.2px;
　　　　margin: 0 auto;
　　　　font-size: 26px;
　　　　line-height: 1.4;
　　　　-webkit-line-clamp: 3;
　　　　-webkit-box-orient: vertical;
　　　　overflow: hidden;
　　　　text-overflow: ellipsis;
　　}

　　方法二、

　　intwoline2{
　　　　display:-webkit-box !important;
　　　　overflow:hidden;
　　　　text-overflow:ellipsis;
　　　　word-break:break-all;
　　　　-webkit-box-orient:vertical;
　　　　-webkit-line-clamp:2;
　　}

　　方法三、使用伪元素加绝对定位
　　p {
　　　　position:relative;
　　　　line-height:20px;
　　　　max-height:40px;
　　　　overflow:hidden;
　　}
　　p::after {
　　　　content: "\02026";
　　　　position:absolute;
　　　　bottom:0;
　　　　right:0;
　　　　padding-left:40px;
　　　　background:-webkit-linear-gradient
　　　　(left,transparent,#fff 55%);
　　　　background:-o-linear-gradient(right,transparent,#fff 55%);
　　　　background:-moz-linear-gradient(right,transparent,#fff 55%);
　　　　background:linear-gradient
　　　　(to right,transparent,#fff 55%);
　　}

 

1、绝对定位的div居中：
div {
　　position: absolute;
　　width: 300px;
　　height: 300px;
　　margin: auto;
　　top: 0;
　　left: 0;
　　bottom: 0;
　　right: 0;
}
2、垂直居中：
未知容器：
div {
position: absolute;/* 相对定位或绝对定位均可 */
　　width:500px;
　　height:300px;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
}
利用 flex 布局：
.container {
　　display: flex;
　　align-items: center; /* 垂直居中 */
　　justify-content: center; /* 水平居中 */
}
.container div {
　　width: 100px;
　　height: 100px;
}