• css文本溢出隐藏显示省略号(单行+多行)


    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法。

     一. 单行文本不换行,并将超出文本隐藏

    .box-content{

        overflow: hidden;//文本溢出隐藏

        text-overflow: ellipsis;//文本溢出显示省略号

        white-space: nowrap;//不换行

    }

     

    二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号

    在webkit内核中,可以利用-webkit-line-clamp属性,它的值是数字(1, 2, 3…),但它不是CSS标准,只在webkit中实现,必须针对块级元素,

    并将元素的display属性设为:-webkit-box,

    以及-webkit-box-orient属性设为:vertical,具体如下:

    .box-content{
        
        display: -webkit-box; //将元素设为盒子伸缩模型显示
        -webkit-box-orient: vertical; //伸缩方向设为垂直方向
        -webkit-line-clamp: 3//超出3行隐藏,并显示省略号
         overflow: hidden;
    }

    因为它是webkit内核浏览器的实现,对于其他浏览器并不兼容,所以为了兼容更多的浏览器,可以如下的方法来实现。

    三. 兼容所有浏览器的方法

    这种方法利用css的伪选择器after来实现,将元素定位设为relative,将伪选择器设为absolute,在对伪选择器的位置进行调整即可。如下:

    两行溢出省略

    p {
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
    60px;
    }

    p::after {
    display: block;
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    }

    提示:设置要显示的行数只需要将height设为line-height的整数倍即可。

    由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

  • 相关阅读:
  • 原文地址:https://www.cnblogs.com/coderL/p/7479878.html
  • 最新文章
  • 热门文章
一二三 - 开发者的网上家园