一、单行:

  效果:

实现这各效果必须要加上:

text-overflow: ellipsis;  /*文本溢出*/
overflow: hidden;      /*配合使用:溢出隐藏*/
white-space: nowrap;    /*配合使用:不换行*/

二、多行:

  实现效果必须加上:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //行数
-webkit-box-orient: vertical;

CSS3 文本溢出问题的更多相关文章

  1. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  2. CSS3文本溢出

    text-overflow: text-overflow:clip | ellipsis; clip:剪切多余的文字. ellipsis:文本溢出时显示省略标记. 要实现文本溢出剪切显示省略标记,还需 ...

  3. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  4. CSS3:CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  5. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  6. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...

  7. CSS3文本温故

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

  8. 浅谈文本溢出省略号代表修剪text-overflow

    一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性.  示例 ...

  9. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

随机推荐

  1. 关于oraclize使用最好的一篇文章

    https://medium.com/@msolomon44/using-apis-in-your-ethereum-smart-contract-with-oraclize-95656434292e ...

  2. layer使用注意事项

    ajax一定要设置为异步

  3. easyui-tabs扩展根据自定义属性打开页签

    .增加扩展 <script type="text/javascript" > /** * @author {kexb} easyui-tab扩展根据id切换页面 */ ...

  4. js失效的原因及解决方式

    1.在head中先引用了js文件再引用jquery,应先引用jquery 2.js文件中所有代码应包含在$(function(){ });中

  5. Hadoop压缩之MapReduce中使用压缩

    1.压缩和输入分片 Hadoop中文件是以块的形式存储在各个DataNode节点中,假如有一个文件A要做为输入数据,给MapReduce处理,系统要做的,首先从NameNode中找到文件A存储在哪些D ...

  6. NetBeans找不到C/C++编译器

    如果您已经安装 NetBeans IDE 6.9,但其中不包括 C/C++ 插件 如果在选择“文件”>“新建项目”时,NetBeans IDE 未显示 "C/C++" 项目类 ...

  7. 深入理解java虚拟机(十四)正确利用 JVM 的方法内联

    在IntelliJ IDEA里面Ctrl+Alt+M用来拆分方法.选中一段代码,敲下这个组合,非常简单.Eclipse也用类似的快捷键,使用 Alt+Shift+M.我讨厌长的方法,提起这个下面这个方 ...

  8. UML的常用关系及其符号表示

    原创 UML的常用关系及其符号表示 一.实现关系 通常是一个类实现一个接口 符号表示: 二.泛化关系 通常是一个类继承另外一个类 符号表示: 三.依赖关系 通常是一个类里面的方法的参数类型是另一个类 ...

  9. XE5应用开发支持的安卓设备

    XE5应用开发支持的安卓设备 A.官方文档声明 RADStudio 支持Android设备的应用开发,android版本从2.3到4.3.x,ARMv7处理器,MEON支持.根据Embarcadero ...

  10. ubuntu eclipse 集成pyDev

    Eclipse help 选择安装新软件 添加一个pydev 名字随意.地址是 http://pydev.org/updates. 下面的列表会出现很多PyDev For Eclipse 选择版本最高 ...