CSS 控制单行或者多行文本超出显示省略号

最新推荐文章于 2024-07-18 17:34:14 发布

codeMob_ZMZ

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量287

点赞数

分类专栏： solve 文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_43683753/article/details/127554619

版权

solve 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.单行文本

p {
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
    width: 250px;/*需要配合宽度来使用*/
}

2.多行文本显示省略号，省略号在段尾

p{　
　　display: -webkit-box;
  text-overflow: ellipsis;
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 3;
　　overflow: hidden;
}

Tips:

// vue 中不会报错
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

// 多行超出省略号不生效解决办法： 
text-overflow: ellipsis;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 3;
overflow: hidden;