首页 css CSS 实现文本的单行和多行溢出省略效

CSS 实现文本的单行和多行溢出省略效

CSS 实现文本的单行和多行溢出省略效

1:单行文本溢出


            .textTruncate {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

2:按行数-多行文本溢出(兼容性不好)


            .mulLineTruncate {
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

3:按高度-多行文本溢出(没有省略号)


            .mulLineTruncate {
                max-height: 40px;
                overflow: hidden;
                line-height: 20px;
            }

4:解决3方案没有省略号的情况


            .mulLineTruncate {
                position: relative;
                max-height: 40px;
                overflow: hidden;
                line-height: 20px;
                &::after {
                position: absolute;
                right: 0;
                bottom: 0;
                padding: 0 20px 0 10px;
                content: '...';
            }
关注本站微信公众号