通用的功能性CSS代码总结

1.清除浮动

/* 万能清除法 */
    .clearfix:after {  // 此处的clearfix是浮动元素的父元素
        content: "";
        height: 0;
        clear: both;
        display: block;
        overflow: hidden;
        visibility: hidden;
    }

2.单行文本溢出显示省略号

.content {
            width: 200px;
            /*限制宽度*/
            overflow: hidden;
            /*内容超出后隐藏*/
            text-overflow: ellipsis;
            /* 超出内容显示为省略号*/
            white-space: nowrap;
            /*文本不进行换行*/
        }

3.多行文本溢出显示省略号

.content {
            width: 200px;
            /*限制元素宽度*/
            overflow: hidden;
            /*文本超出隐藏*/
            display: -webkit-box;
            /*盒子模型微弹性伸缩模型*/
            -webkit-box-orient: vertical;
            /*伸缩盒子的子元素垂直排列*/
            -webkit-line-clamp: 3;
            /*文本显示3行*/
        }

4.文字不满一行时居中，超过一行靠左

.content {
            width: 200px;
            height: 80px;
            background-color: coral;
            text-align: center;
        }
.content>p {
            display: inline-block;
            text-align: left;
        }

5.子元素在父元素中垂直居中

方法有很多种，可移步至 CSS实现子元素在父元素中水平垂直居中的方法总结 查看

这里列举的只是我暂时想到的，欢迎补充！