成都创新互联网站制作重庆分公司

css怎么实现单行文本超出省略号

这篇文章主要介绍“css怎么实现单行文本超出省略号”,在日常操作中,相信很多人在css怎么实现单行文本超出省略号问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css怎么实现单行文本超出省略号”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

在丰宁等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供做网站、网站建设 网站设计制作按需定制设计,公司网站建设,企业网站建设,成都品牌网站建设,全网营销推广,成都外贸网站建设公司,丰宁网站建设费用合理。

    css实现单行文本的溢出显示省略号应该用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

    css单行文本超出省略号的实现代码:

   

   

   

   

    省略号test

   

    *{

    margin:0;

    padding:0;

    }

    body{

    padding:10px;

    font-family:Arial;

    }

    #test{

    position:relative;

    width:150px;

    height:20px;

    line-height:20px;

    text-overflow:ellipsis;

    white-space:nowrap;

    *white-space:nowrap;

    overflow:hidden;

    border:1pxsolid#999;

    }

    #testspan{

    position:absolute;

    top:0;

    right:0;

    display:block;

    float:left;

    }

   

   

   

    php中文网php中文网php中文网php中文网php中文网php中文网php中文网

   

   

    css单行文本超出省略号的效果如下:

    2345截图20180919100533.png

    text-overflow:ellipsis属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢?下面我们就继续说css实现多行文本超出省略号的方法。(text-overflow:ellipsis属性更多内容可参考css手册)

    1、css实现多行文本超出省略号之直接用css属性设置(只有-webkit内核才有作用)

    语法:

    overflow:hidden;

    text-overflow:ellipsis;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;

    -webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupportedWebKitproperty),它没有出现在CSS规范草案中。

    display:-webkit-box将对象作为弹性伸缩盒子模型显示。

    -webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式。

    text-overflow:ellipsis以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。

    2、css实现多行文本超出省略号之利用绝对定位和padding;(跨浏览器解决方案)

    语法:

    p{

    position:relative;

    line-height:20px;

    max-height:40px;

    overflow:hidden;

    }

    p::after{

    content:"...";

    position:absolute;

    bottom:0;

    right:0;

    padding-left:40px;

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

    background:-o-linear-gradient(right,transparent,#fff55%);

    background:-moz-linear-gradient(right,transparent,#fff55%);

    background:linear-gradient(toright,transparent,#fff55%);

    }

    这个方法的原理是:首先在包含文字的元素里,嵌入一个...,然后包含文字的元素右侧留出...的位置(padding-right),最后利用绝对定位将...定位至右侧的padding-right区域。

    说明:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

    注意:

    将height设置为line-height的整数倍,防止超出的文字露出。

    给p::after添加渐变背景可避免文字只显示一半。

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

到此,关于“css怎么实现单行文本超出省略号”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


当前文章:css怎么实现单行文本超出省略号
文章来源:http://cxhlcq.com/article/jgdjig.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部