css实现单行和多行省略号

1.单行省略

{

width:300px;

overflow: hidden;

text-overflow:ellipsis;

whitewhite-space: nowrap;

}

注：单行省略必须设置宽度

2.多行省略

{

display:-webkit-box;

overflow:hidden;

text-overflow:ellipsis;
-webkit-line-clamp:;

-webkit-box-orient:vertical;

}

以上方式存在兼容问题，只有带webkit内核的浏览器才兼容

<div class="container">

<div class="text">

 dsasssssefewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwfvffdassssssssssssssssssss

</div>

</div>

        .container{

            height: 40px;

            line-height: 20px;

            width: 100%;

            overflow: hidden;

        }

        .container .text{

            float: right;

            margin-left: -15px;

            width: 100%;

            color: #000;

            word-break: break-all;

            word-wrap: break-word;

        }

        .container::before{

           float:left;

           width: 15px;

           content: '';

           height: 40px;

        }

        .container::after{

            float: right;

            content: '...';

            height: 20px;

            line-height: 20px;

            width: 3em;

            text-align: right;

            margin-left: -3em;

            position: relative;

            left: 100%;

            top:-20px;

            padding-right: 15px;

background: -webkit-linear-gradient(left, transparent, #fff 52%);

background: -o-linear-gradient(rightright, transparent, #fff 52%);

background: -moz-linear-gradient(rightright, transparent, #fff 52%);

background: linear-gradient(to rightright, transparent, #fff 52%);

        }

::before占了一个位置，为了让::after显示的内容在右边显示作铺垫，float:right为了让省略号在不溢出的情况下在最右边显示，::after 中position:relative;left:100% 是为了当溢出时，省略号在最右边显示　　

该方法兼容良好，适合各大主流浏览器

巴特西

css实现单行和多行省略号

最新文章

热门文章