文本超出部分省略号展示

宇宙无敌最坚固铁桶僵尸

已于 2023-03-30 17:08:45 修改

阅读量122

点赞数

文章标签： css html css3

于 2023-03-30 17:05:46 首次发布

本文链接：https://blog.youkuaiyun.com/coderDouble/article/details/129861568

版权

本文介绍了CSS中实现文本单行和多行省略的样式设置方法，包括overflow:hidden,text-overflow:ellipsis,white-space:nowrap以及WebKit特性的-webkit-line-clamp和-webkit-box-orient。这种方法主要应用于WebKit内核的浏览器，需要注意其兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.单行省略展示：
{ 
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
}

2.多行省略展示：  
{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

//overflow:溢出隐藏 1.text-overflow：文本溢出表现形式 2.white-space: 不换行;

//WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）可以使用，存在兼容问题。