文本溢出部分省略号样式处理

最新推荐文章于 2024-07-10 22:21:40 发布

指间行走

最新推荐文章于 2024-07-10 22:21:40 发布

阅读量36

点赞数

分类专栏： CSS 语言文章标签：前端 javascript 开发语言 css

本文链接：https://blog.csdn.net/ant_dreams/article/details/134416979

版权

CSS 语言专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、文本单行显示溢出部分省略号

.textOverflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

2、多行文本显示溢出部分省略号

.textOverflowMulti{
  position: relative;
  max-height: 3 * 1.5em;    // 3行，此数值根据需要修改
  margin-right: -1em;
  padding-right: 1em;
  overflow: hidden;
  line-height: 1.5em;
  text-align: justify;
}

.textOverflowMulti::before{
    position: absolute;
    right: 14px;
    bottom: 0;
    padding: 0 1px;
    background: '#ffffff';    // 文本域背景颜色
    content: '...';
}
.textOverflowMulti::after{
    position: absolute;
    right: 14px;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: white;
    content: '';
}