CSS实现单行或多行文本溢出显示省略号

个人学习笔记，欢迎评论，虚心接受批评和建议。

效果图：

代码块

单行文本溢出省略：

#content1{
        width: 500px;height: 20px;
        margin: 0px 50px;border: 1px black solid;
        white-space:nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
        
<h4>单行文本溢出省略:</h4>
    <div id="content1">中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</div>

多行文本溢出省略：

#content2{
        width: 500px;height: 130px;
        margin: 0px 50px;border: 1px black solid;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;/* 数值表示在第几行省略 */
        }

<h4>多行文本溢出省略:</h4>
    <div id="content2">中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，
        致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
        旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；
        新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、
        CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；IT技术培训学习平台： CSDN学院；
        技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；高校IT技术学习成长平台：高校俱乐部。
    </div>