//单行文本溢出部分隐藏显示省略号...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; /**
  n 行文本溢出部分隐藏显示省略号..
  使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
(WebKit: 是一个开源的浏览器引擎) http://blog.csdn.net/cutesource/article/details/8731841/
 -webkit-line-clamp:限制在一个块元素显示的文本的行数
(box-orient:指定一个box子元素是否应按水平或垂直排列)http://www.runoob.com/cssref/css3-pr-box-orient.html
**/
width:100%
height:20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;



WEB-CSS实现单行(多行)文本溢出显示省略号的更多相关文章

  1. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  2. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  3. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  4. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  5. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

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

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

  7. 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  8. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  9. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

随机推荐

  1. MyBatis实体属性与表的字段不对应的解决方案

    1.通过在查询的SQL语句中定义字段名的别名,让字段名的别名和实体类的属性名一致,这样就可以表的字段名和实体类的属性名一一对应上,这种方式是通过在SQL语句中定义别名来解决字段名和属性名的映射关系的. ...

  2. mysql-performance-schema

    http://www.fromdual.com/mysql-performance-schema-hints http://www.cnblogs.com/cchust/

  3. [tarjan] 1827 Summer Holiday

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1827 Summer Holiday Time Limit: 10000/1000 MS (Java/ ...

  4. 软考之J2SE

    特别感谢软考让我如今就接触了神奇的java.曾经尽管真不知道java是个神马,看完马士兵的视频发现里面的东西并不陌生.有vb,c++,c#做基础加上这次的J2SE发现原来编程语言有非常多同样的特性.也 ...

  5. Java 中 modifer &#39;public&#39; is reduntant for interface methods

    http://androidren.com/index.php?qa=322&qa_1=java-%E4%B8%AD-modifer-public-is-reduntant-for-inter ...

  6. 图像处理之基础---基于opencv的灰度图像微分

    argv分别为,可执行文件名.读入的原始图像.输出原始图像的灰度值.输出原始图像灰度值沿x轴方向的一阶微分.输出原始图像灰度值沿x轴方向的二阶微分. #include #include #includ ...

  7. web 开发之js---js获取select标签选中的值

    var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 va ...

  8. javascript总结02

    1 如何打开和关闭一个新的窗口? 2 Window对象的哪个属性能返回上一个浏览页面? 3 一次或多次执行一段程序的函数是什么? 定时函数 4 如何查找并访问节点? 5 给表格新增行和单元格的方法分别 ...

  9. Lein droid

    最近尝试使用Clojure,发现有个Lein droid的项目可以方便的在android下使用Clojure. http://clojure-android.info/#get-started 尝试了 ...

  10. Linux/Android——Input系统之InputMapper 处理 (八)【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/43561773 前文Linux/Android——Input系统之InputReader (七)介 ...