常用css样式-文本超出、三角形角标、水平垂直居中

1、css一行文本超出显示 ...

/* 
    显示效果： 
    春节返乡...
*/
p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2、多行文本超出显示 ...

/* 
    显示结果： 
    CSDN创立于1999年，是中国最大的IT社区和服务平台，
    为中国的软件开发者和IT从业者提供知识传播、职...
*/
p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

3、使用css写出一个三角形角标

可直接将元素高度设置为 0，通过 border 属性来设置，让其他三个方向的 border 的颜色与背景色一致，根据需要角度设置一条 border 的颜色

div {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: red;
}

4、水平垂直居中

推荐两种方式，一种定位，使容器水平垂直居中；一种使用 flex，父级控制子级居中

/* 方法一：使用定位 */
div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

/*方法二：使用 flex*/
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}