1. 作者:zhanhailiang 日期:2014-10-24

不做前端非常久了,今天从重构师那里了解到CSS3已经能够实现非常多以往必须通过JS才干实现的效果,如渐变,阴影,自己主动截断文本展示省略号等等强大效果,并且这些功能日渐成熟,已经大量用于生产环境。H5真的日渐成熟了,得恶补下了。

下面分享实现指定文本超出部分以省略号展示的Demo:

  1. <style>
  2. .text1 {
  3. width:200px;
  4. overflow:hidden;
  5. text-overflow:ellipsis;
  6. -o-text-overflow:ellipsis;
  7. -webkit-text-overflow:ellipsis;
  8. -moz-text-overflow:ellipsis;
  9. white-space:nowrap;
  10. }
  11. .text2 {
  12. width:200px;
  13. word-break:break-all;
  14. display:-webkit-box;
  15. -webkit-line-clamp:2;
  16. -webkit-box-orient:vertical;
  17. overflow:hidden;
  18. }
  19. </style>
  20.  
  21. <div class="text1">热卖精选:从子频道(服饰鞋包。亲子。居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list。数量为50个</div>
  22.  
  23. <br />
  24.  
  25. <div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家。美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>

例如以下图:

CSS3怎样实现超出指定文本以省略号显示效果的更多相关文章

  1. CSS3如何实现超出指定文本以省略号显示效果

    不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境.H5真的日渐 ...

  2. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  3. css3实现超出文本指定行数(指定文本长度)用省略号代替

    测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  4. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  6. HTML超出文本显示省略号...[text-overflow]

    需要对div或者span同时应用Css: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现所想要得到的溢出文本显示省略 ...

  7. CSS控制文本超出后隐藏并用省略号代替

    一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...

  8. css超出2行部分省略号...

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  9. 表格里使用text-overflow后不能隐藏超出的文本的解决方法

          当把text-overflow设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,不过在表格里面使用text-overflow后依旧不能隐藏超 ...

随机推荐

  1. golang笔记:unsupported driver -> Scan pair: <nil> -> *string

    golang里,操作mysql数据库,使用查询语句的时候,一般的写法 rows, err := db.Query("select name from table") if err ...

  2. POJ 1466 Girls and Boys(二分图匹配)

    [题目链接] http://poj.org/problem?id=1466 [题目大意] 给出一些人和他们所喜欢的人,两个人相互喜欢就能配成一对, 问最后没有配对的人的最少数量 [题解] 求最少数量, ...

  3. 【贪心】Codeforces Round #402 (Div. 2) C. Dishonest Sellers

    按照b[i]-a[i],对物品从大到小排序,如果这个值大于零,肯定要立刻购买,倘若小于0了,但是没买够K个的话,也得立刻购买. #include<cstdio> #include<a ...

  4. 【分块】bzoj2120 数颜色

    分块,在每个点记录一下它之前离它最近的相同颜色的位置pre[i],显然问题转化成了求[l,r]中pre[i]<l的值的个数. 这是分块擅长的,在每个块内记录有序表,查询时对零散的暴力,整块的二分 ...

  5. openresty总结

    协程 1.例如当获取的数据没有前后依赖关系时,可以使用ngx.thread.spawn和ngx.thread.wait同时从数据库不同的库.表或者不同来源(mysql,redis等)获取数据. htt ...

  6. 【R笔记】使用R语言进行异常检测

    本文转载自cador<使用R语言进行异常检测> 本文结合R语言,展示了异常检测的案例,主要内容如下: (1)单变量的异常检测 (2)使用LOF(local outlier factor,局 ...

  7. Android Studio 生成aar包多Module引用问题

    问题描述: 有个arr文件被放到Module A中引用,现在Module B又依赖了Module A,则在编译过程中会发生错误,Module B找不到aar文件. 解决办法: 使用相对路径来找到这个a ...

  8. 【SQL Server学习笔记】事务、锁定、阻塞、死锁 sys.sysprocesses

    http://blog.csdn.net/sqlserverdiscovery/article/details/7712068 Column name Data type Description   ...

  9. perspective 的笔记

    以前看到别人做的banner图,3d变化,很羡慕啊,一直不知道怎么做,直到看到了这个样式perspective,然后就知道怎么实现了 一个简单的例子,扫起 demo下在地址    http://fil ...

  10. IOS开发使用委托delegate在不同窗口之间传递数据

    IOS开发使用委托delegate在不同窗口之间传递数据是本文要介绍的内容,主要是来讲解如何使用委托delegate在不同窗口之间传递数据,具体内容来看详细内容.在IOS开发里两个UIView窗口之间 ...