//单行文本溢出部分隐藏显示省略号...
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. Linux下搭建maven私服Nexus 3.2.1-01

    1. 私服介绍私服是指私有服务器,是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构建.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库:否则, ...

  2. 如何启动/关闭weblogic

    听语音 | 浏览:7107 | 更新:2014-12-25 15:43 1 2 3 4 5 6 分步阅读 最近用到weblogic 给大家分享一下如何启动和关闭weblogic 工具/原料   电脑 ...

  3. <a href="javascript:;"></a>

    有时会在网页a标签中看到这样的代码,比如: <a href="javascript:;">反选</a> 这是啥意思呢? 我们知道标签的 href属性用于指定 ...

  4. 如何以正确的顺序重新安装驱动程序 | Dell 中国

      购买 支持 社区 我的帐户     购买 支持 社区   如何以正确的顺序重新安装驱动程序 在戴尔笔记本电脑或台式机上手动重新安装Microsoft Windows操作系统后,您还必须以正确的顺序 ...

  5. [Spring] Properties for project configuration

    We might have some project specific configuration need to setup. The good approach to do this in Spr ...

  6. 魔兽争霸3 冰封王座 w3g文件如何打开

    w3g文件怎么样才能看??? 满意回答 检举|2011-11-10 11:23 你应该是玩魔兽争霸的吧,如果是就找到你魔兽安装文件夹里面有个replay的文件夹,把w3g格式的文件放入该文件夹,再进入 ...

  7. 谈论javascript闭包

    闭包看似很简单,其实牵扯了很多东西,例如:上下文作用域(事件处理程序).内存占用.局部以及全局变量.回调函数以及编程模式等 首先我们谈论一个问题,为什么需要闭包? 1.var全局定义(全局污染)- 指 ...

  8. eclipse中j2ee(struts2)部署及相关问题释疑

    1.eclipse中进行web项目开发时.部署的时候和利用myeclipse部署时有非常大不同,由于在myeclipse的工具栏中有一个部署button.而且在myeclipse的preference ...

  9. 使用heartbeat+monit实现主备双热备份系统

    一.使用背景 项目须要实现主备双热自己主动切换的功能,保证系统7*24小时不间断执行.现已有两台双网卡的IBM的server,为了不再添加成本採购独立外部存储设备和双机热备软件.採用了linux下开源 ...

  10. [swift实战入门]手把手教你编写2048(一)

    苹果设备越来越普及,拿着个手机就想捣鼓点啥,于是乎就有了这个系列,会一步一步教大家学习swift编程,学会自己做一个自己的app,github地址:https://github.com/scarlet ...