设置Div多行文本超出时,以省略号代替
这个文章不错 http://www.css88.com/archives/5206
css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式。
下面是从 w3shcool截的图:

但是 text-overflow 有一个缺陷,它只能对单行文本起效果,如果是多行文本就不好使了。
如果想对多行文本也实现以省略号代替超出部分的话,可以使用下面方法(貌似局限于webkit内核):
max-height:100px; /*首先设置div高度*/ overflow:hidden; /*设置超出部分隐藏*/ text-overflow:ellipsis; /*然后设置文本隐藏方式*/ /*为了实现多行文本也有效果要设置如下3个属性,具体属性的含义我还不是很清楚:*/ display:-webkit-box; -webkit-line-clamp:3; /*只显示3行,如果不设置这个属性,会出现文本被拦腰截断的现象*/ -webkit-box-orient: vertical;
最后的效果:

设置Div多行文本超出时,以省略号代替的更多相关文章
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- Div内部的内容超出部分显示省略号(仅仅只有一行内容)
效果如下:
- htnl5中设置文本单行显示,超出部分打省略号,鼠标移到文本时alt出全部文本内容
Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- css----单行文本超出部分显示省略号
width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
- css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...
- 几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等
1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
随机推荐
- 你喜欢使用eclipse+tomcat编程吗?!
在eclipse中配置tomcat简直是一场灾难! 开源软件确实给开发者极大的自由,但,同时也带来额外的麻烦. eclipse+tomcat只是其中之一.我有幸碰到了N次,在N+1次时,不得不提笔撰文 ...
- cocos2d-x v3.0的window平台搭建和编译成andriod程序
首先添加这个地址到系统环境变量,path 然后打开CMD,输入如下语句 现在就可以创建一个新项目了 这样一个空的cocos2d-x v3.0的项目就创建好了 接下来编译andriod程序 先在系统环境 ...
- ASP.NET错误页
当页面发生错误的时候,ASP.Net会将错误信息展示出来,这样一来不好看,二来会泄露网站的内部实现信息,给网站带来安全隐患,因此需要定制错误页,发生错误时显示开发人员定制的页面404页面放点广告也是好 ...
- mysql query insert中文乱码
mysql新建的表的charset都是utf8的. 在phpmyadmin里直接敲sql,中文可以insert进去的,但是在php代码里mysql_query同样的sql语句就是不行,保存到表里是乱码 ...
- javascript 写状态模式
写了状态模式的切换,以及分支循环.but 怎么实现子状态嵌套呢? /** * by JackChen 2016-3-26 11.51.20 * * 状态模式: * 一个状态到另一个状态的变换.其实可以 ...
- Mongoengine 使用笔记
1.直接将某个document对象导出对应的json数据. #models class Feed(Document): """ @summary: 所有订阅内容 &quo ...
- uublog在线测试demo
http://demo.uublog.me/ 后台 http://demo.uublog.me/admin/ 用户名/密码:admin/admin
- ADS的默认连接分析及编译器产生符号解惑
ADS的默认连接顺序是怎样的呢?例如下边从2440init.s中摘出的编译器符号又该怎样理解呢? BaseOfROM DCD |Image##RO##Base| TopOfROM ...
- word中的表格空白部分整不掉,下面的表格拉不上来
是因为下页的表格太大,占据了一页,要把下面的表格拉小一点
- bzoj 1914: [Usaco2010 OPen]Triangle Counting 数三角形 容斥
1914: [Usaco2010 OPen]Triangle Counting 数三角形 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 272 Sol ...