CSS3实现两行或三行文字，然后多出的部分省略号代替
概述
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
语法
-webkit-line-clamp：<number>
默认值： ? ?表示不清楚；
适用于：块元素
继承性：无
动画性：否
计算值：指定的值
取值
<number>：
块元素显示的文本的行数。
* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
示例：（注意要设置固定高度，宽度可不限定）
font-size: 12px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
height:50px;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<p style="
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
">
static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
</p>
</body>
</html>
CSS3实现两行或三行文字，然后多出的部分省略号代替的更多相关文章
- div+css显示两行或三行文字，超出用...表示
<style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: ...
- div+css显示两行或三行文字
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; //需要控制的文本行数 overflow: hidd ...
- CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
- 纯CSS3浮雕质感的立体文字旋转动画
还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- css 实现div内显示两行或三行，超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示 ...
- css3实现超出文本指定行数(指定文本长度)用省略号代替
测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号
css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...
随机推荐
- SCSI Pass-Through Interface Tool
http://code.msdn.microsoft.com/SCSI-Pass-Through-a906ceef/sourcecode?fileId=59048&pathId=1919073 ...
- IntelliJ IDEA 学习（五）类注释和自定义方法注释
intellj idea的强大之处就不多说了,相信每个用过它的人都会体会到,但是我们经常会感觉他很复杂,尤其刚从eclipse转过来的童鞋,相信刚开始的那段经历都是不堪回首的 如何实现 ...
- Linux下的两个经典宏定义 转
http://www.linuxidc.com/Linux/2016-08/134481.htm http://www.linuxidc.com/Linux/2013-01/78003.htm htt ...
- 多进程多线程GDB调试 (转)
多进程多线程GDB调试 一.线程调试指南: 1. gdb attach pid 挂载到调试进程 2. gdb$ set scheduler-locking on 只执行当前选定线程的 ...
- 【Nginx】ngx_event_core_module模块
ngx_event_core_module模块属于事件模块,它是其他事件类模块的基础.它主要完毕下面任务: 创建连接池 决定使用哪些事件驱动机制 初始化将要使用的事件模块 以下分析该模块的代码. ng ...
- AutoCAD二次开发——AutoCAD.NET API开发环境搭建
AutoCAD二次开发工具:1986年AutoLisp,1989年ADS,1990年DCL,1993年ADS-RX,1995年ObjectARX,1996年Active X Automation(CO ...
- 关于JAVA多线程并发synchronized的测试与合理使用
在项目开发中, 或许会碰到JAVA的多线程处理, 为保证业务数据的正常, 必须加上锁机制, 常用的处理方法一般是加上synchronized关键字, 目前JDK版本对synchronized已经做了 ...
- java类与继承的执行顺序
1.子类 public class TestClassLife extends TestClassLifeSuper { public TestClassLife() { System.out.pri ...
- Spark一个简单案例
Spark是一个类似Map-Reduce的集群计算框架,用于快速进行数据分析. 在这个应用中,我们以统计包含"the"字符的行数为案例,.为建立这个应用,我们使用 Spark 1. ...
- uva 10160 Servicing Stations（DFS+剪枝）
Servicing stations A company offers personal computers for sale in N towns (3 <= N <= 35). The ...