这个文章不错 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多行文本超出时,以省略号代替的更多相关文章

  1. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  2. Div内部的内容超出部分显示省略号(仅仅只有一行内容)

    效果如下:

  3. htnl5中设置文本单行显示,超出部分打省略号,鼠标移到文本时alt出全部文本内容

    Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: ...

  4. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  5. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. css----单行文本超出部分显示省略号

    width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

  7. css实现单行、多行文本超出显示省略号

    前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...

  8. 几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  9. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

随机推荐

  1. SpringMVC的文件上传

    首先导入jar包 在springMVC里面配置文件上传,以及限定上传文件的大小  <bean id="multipartResolver" class="org.s ...

  2. "ERR_GFX_D3D_INIT", GTA5-报错解决办法

    GTA5 PC 版,online模式报错“ERR_GFX_D3D_INIT”. 网上搜到一篇文章,可以解决此问题: http://fixcrasheserrorguide.com/fix-grand- ...

  3. 10.12_win8风格,把专业书籍当小说看,SQLite

    (1)CSS:Metro UI CSS(Metroui) 是一套实现了 Windows 8 的 Metro 风格界面的 CSS 框架..官网.BootMetro . (2)[开源访谈]CecOS作者 ...

  4. HDU 4627 The Unsolvable Problem(简单题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4627 题目大意:给定一个整数n(2 <= n <= 109),满足a+b=n并且[a,b] ...

  5. Java编写的C语言词法分析器

    Java编写的C语言词法分析器 这是java编写的C语言词法分析器,我也是参考很多代码,然后核心代码整理起来,放在QQ空间和博客上,目的是互相学习借鉴,希望可以得到高手改进.这个词法分析器实现的功能有 ...

  6. WebConfig加密解密

    加密:aspnet_regiis -pef appSettings "G:\FlyMusicNew\Web"解密:aspnet_regiis -pdf appSettings &q ...

  7. 关于datagridview单元格不切换焦点无法获得新输入数据的问题解决方法

    问题描述:将EXCEL中的数据导入到dataGridView中,然后通过点击toolStripButton对dataGrideView中的数据进行处理,在测试时,向dataGridView中的某个单元 ...

  8. Extjs发票管理系统

    技术特点:Extjs框架,三层架构,Ajax,json 1.仿office2007菜单.介面美观大方,可动态更改皮肤保存至cookie. 2,json数据源与实体类的相互转换. 3.可下载桌面版登录方 ...

  9. win7如何完全写在iis

    在前些天,因为需要搭建了ftp服务器,但是今天不需要了,所以要卸载iis,因为我不会让iis和apache同时共存,所以只能卸载了 先找到windows功能,然后把Internet信息服务勾选掉,重启 ...

  10. 前端工程的构建工具对比 Gulp vs Grunt

    1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...