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

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

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

<style>
.text1 {
width:200px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
white-space:nowrap;
}
.text2 {
width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
</style>
 
<div class="text1">热卖精选:从子频道(服饰鞋包。亲子。居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list。数量为50个</div>
 
<br />
 
<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. 洛谷 P1093 奖学金【三级结构体排序】

    题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相同,再按语文成绩从高 ...

  2. ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛

    编号 名称 通过率 通过人数 提交人数 A√水题(队友写的 Visiting Peking University 91% 1122 1228 B— Reverse Suffix Array 57% 6 ...

  3. 百度之星资格赛 2016 Problem 1002

    本文链接:http://www.cnblogs.com/Ash-ly/p/5494623.html 题意: 度熊面前有一个全是由1构成的字符串,被称为全1序列.你可以合并任意相邻的两个1,从而形成一个 ...

  4. [BZOJ 1804] Flood

    Link: BZOJ 1804 传送门 Solution: 不容易啊,第一道完全自己A掉的IOI题目..... 算法思想其实很简单: 模拟缩减的过程即可 将每条边转为2条有向边,每次找到最左边的边,沿 ...

  5. 【分类讨论】Codeforces Round #395 (Div. 2) D. Timofey and rectangles

    D题: 题目思路:给你n个不想交的矩形并别边长为奇数(很有用)问你可以可以只用四种颜色给n个矩形染色使得相接触的 矩形的颜色不相同,我们首先考虑可不可能,我们分析下最多有几个矩形互相接触,两个时可以都 ...

  6. POI 设置Excel样式(转)

    POI 设置Excel样式 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结: 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSh ...

  7. lua 脚本之高级篇 (面向对象的完全支持),有性能问题。

    ---------------------------------------------------------- --面向对象核心库 ------------------------------- ...

  8. 在WPF 4.5中跨线程更新集合

    WPF中一个非常强大的功能是数据绑定,我们可以把一个集合绑定到ListBox中,当集合的数据发生变更时,ListBox界面也会同步变更.本身这是一个非常美好的事情,但是美中不足的是:当把集合绑定到Li ...

  9. 【Node.js】1.安装步骤

    1.在官网找到对应版本下载 2.点击安装 3.检查安装成功 path可以看到node.js的安装目录已经自动配置在环境变量path中了 如果node -v或者node --version不能正确展示当 ...

  10. iOS :学习新技术途径和sizeClasses屏幕适配

    1.了解有什么新技术 1> 苹果API文档 - General - Guides - iOSx API Diffs 2> 观看WWDC会议视频 2.如何使用新技术 1> 自己根据AP ...