文本超出部分省略号展示

原创已于 2023-03-30 17:08:45 修改 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

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

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

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内核的浏览器）可以使用，存在兼容问题。