css实现文本单行，多行缩略方法

最新推荐文章于 2025-05-27 03:06:36 发布

原创最新推荐文章于 2025-05-27 03:06:36 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #文本缩略 #单行 #多行

1，单行文本缩略

在这里插入图片描述

overflow: hidden;				//超出内容隐藏
white-space: nowrap;			//文本不换行
text-overflow: ellipsis;		//文本超出内容用（...）代替

2，多行文本缩略（仅支持谷歌）

在这里插入图片描述

overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;				//创建盒子模型
-webkit-line-clamp: 2;				//规定显示的代码行数
/*! autoprefixer: off **/			//参考其他资料时，说这个会在代码环境下被忽略，虽然我没遇到，但是还是把解决方法加上去
-webkit-box-orient: vertical;		//autoprefixer 这个关键字可以免除被过滤的动作
/*! autoprefixer: on   **/

火狐多行缩略方法

在这里插入图片描述

.item {
    position: relative;
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off **/
    -webkit-box-orient: vertical;
    /*! autoprefixer: on   **/
    height: 3.6em;				//限定个高度值
    line-height: 26px;
}
.item:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);		/仅火狐下有效
}

文章参考1：https://blog.youkuaiyun.com/weixin_34403976/article/details/86154905
文章参考2：https://www.bbsmax.com/A/KE5Qje03dL/