在css3出现之前，一般采用substring来进行截取，现在 不用js，纯css3也能进行截取了：

text-overflow：clip | ellipsis

1.clip: 要在一定的高度内，配合overflow：hidden才有效，若没有overflow：hidden；将 不会有任何效果；

2.ellipsis：将超出的部分用省略号表示，需要配合overflow：hidden和white-space：nowrap一起使用才有效果。

css3进行截取的更多相关文章

  1. CSS3：text-overflow实现文字截取，超出部分显示省略号

    1. 概述 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处, 一是不用通过后端程序截取: 二是有利于SEO. 2. text-overflow的属性 clip: 当对象 ...

  2. css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容

    css3 属性 text-overflow: ellipsis 前言 正文 结束语 前言 我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替, ...

  3. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  4. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  5. 转载——CSS3 Object-fit和Object-position

    在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...

  6. CSS3魔法堂：说说Multi-column Layout

    前言  是否记得<读者文摘>中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊.杂志独有的多栏布局吗?  当我们希望将报刊.杂志中的阅读体验迁移到网页上时,最简单直接的方式就是采用 ...

  7. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  8. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  9. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

随机推荐

  1. eclipse之The currrently displayed page contains invalid values错误

    现象: eclipse的preferences里面须要保存密码,保存报错Could Not Accept ChangesThe currrently displayed page contains i ...

  2. 【IOS实例小计】UIImageView

    预备知识: UIImage 是一个专门存储图片数据的对象,默认兼容的图片格式是 PNG,可以通过文件.Quartz image对象或 image Data数据得到一个图片对象. UIImage相关功能 ...

  3. 14.6.1 Creating InnoDB Tables 创建InnoDB 表:

    14.6.1 Creating InnoDB Tables 创建InnoDB 表: 创建一个InnoDB 表,使用CREATE TABLE 语句,你不需要指定 ENGINE=InnoDB子句 如果In ...

  4. HDU--杭电--4506--小明系列故事——师兄帮帮忙--快速幂取模

    小明系列故事——师兄帮帮忙 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) To ...

  5. 理解并解决GBK转UTF-8奇数中文乱码（转）

    最近在做一个反馈功能,把数据反馈到对方公司网站,我公司是GBK编码,对方公司是UTF-8编码.因此,我需要将GBK编码数据转换成UTF-8编码数据,这样对方网站才不会乱码.最简单的方法是将HttpCl ...

  6. Linux Socket编程注意事项

    Socket API 是网络应用程序开发中实际应用的标准 API.虽然该 API 简单.可是开发新手可能会经历一些常见的问题.本文识别一些最常见的隐患并向您显示怎样避免它们. 隐患 1．忽略返回状态 ...

  7. ZOJ 1859 Matrix Searching(二维线段树)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1859 Matrix Searching Time Limit: 10 Seco ...

  8. POJ 3076 Sudoku (dancing links)

    题目大意: 16*16的数独. 思路分析: 多说无益. 想说的就是dancing links 的行是依照 第一行第一列填 1 第一行第二列填 2 -- 第一行第十五列填15 第一行第二列填 1 -- ...

  9. Android Fragment的介绍与使用(案例Demo)

    应用场景: 众所了解Android上的界面展示都是通过Activity实现的,可是Activity也有它的局限性,相同的界面在手机上显示可能非常好看,在平板上就未必了.为了让界面能够在平板上更好地展示 ...

  10. 彻底删除&quot;提示删除文件和目录&quot;时出错的文件或目录

    当删除文件是出现上图时  能够用以下的方法删除文件 策略一:系统大法 第一招  进程帮你搞定 很多时候乱码文件名称里的文件是explorer.exe进程联系在一起的. 假设要删除的话能够这样:首先命令 ...