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

本是古典何须时尚 2023-10-05 08:34 19阅读 0赞

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

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYVpoYV9fSHVp_size_16_color_FFFFFF_t_70_pic_center]

**代码块**

**单行文本溢出省略：**

#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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYVpoYV9fSHVp_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200817174444735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1poYVpoYV9fSHVp,size_16,color_FFFFFF,t_70#pic_center