WEB-CSS实现单行(多行)文本溢出显示省略号
//单行文本溢出部分隐藏显示省略号...
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实现单行(多行)文本溢出显示省略号的更多相关文章
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法
一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
- 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...
随机推荐
- Linux下搭建maven私服Nexus 3.2.1-01
1. 私服介绍私服是指私有服务器,是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构建.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库:否则, ...
- 如何启动/关闭weblogic
听语音 | 浏览:7107 | 更新:2014-12-25 15:43 1 2 3 4 5 6 分步阅读 最近用到weblogic 给大家分享一下如何启动和关闭weblogic 工具/原料 电脑 ...
- <a href="javascript:;"></a>
有时会在网页a标签中看到这样的代码,比如: <a href="javascript:;">反选</a> 这是啥意思呢? 我们知道标签的 href属性用于指定 ...
- 如何以正确的顺序重新安装驱动程序 | Dell 中国
购买 支持 社区 我的帐户 购买 支持 社区 如何以正确的顺序重新安装驱动程序 在戴尔笔记本电脑或台式机上手动重新安装Microsoft Windows操作系统后,您还必须以正确的顺序 ...
- [Spring] Properties for project configuration
We might have some project specific configuration need to setup. The good approach to do this in Spr ...
- 魔兽争霸3 冰封王座 w3g文件如何打开
w3g文件怎么样才能看??? 满意回答 检举|2011-11-10 11:23 你应该是玩魔兽争霸的吧,如果是就找到你魔兽安装文件夹里面有个replay的文件夹,把w3g格式的文件放入该文件夹,再进入 ...
- 谈论javascript闭包
闭包看似很简单,其实牵扯了很多东西,例如:上下文作用域(事件处理程序).内存占用.局部以及全局变量.回调函数以及编程模式等 首先我们谈论一个问题,为什么需要闭包? 1.var全局定义(全局污染)- 指 ...
- eclipse中j2ee(struts2)部署及相关问题释疑
1.eclipse中进行web项目开发时.部署的时候和利用myeclipse部署时有非常大不同,由于在myeclipse的工具栏中有一个部署button.而且在myeclipse的preference ...
- 使用heartbeat+monit实现主备双热备份系统
一.使用背景 项目须要实现主备双热自己主动切换的功能,保证系统7*24小时不间断执行.现已有两台双网卡的IBM的server,为了不再添加成本採购独立外部存储设备和双机热备软件.採用了linux下开源 ...
- [swift实战入门]手把手教你编写2048(一)
苹果设备越来越普及,拿着个手机就想捣鼓点啥,于是乎就有了这个系列,会一步一步教大家学习swift编程,学会自己做一个自己的app,github地址:https://github.com/scarlet ...