技術標籤：csscss

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;
}