概述

-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实现两行或三行文字，然后多出的部分省略号代替的更多相关文章

  1. div+css显示两行或三行文字，超出用...表示

    <style> .comment_inner{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: ...

  2. div+css显示两行或三行文字

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; //需要控制的文本行数 overflow: hidd ...

  3. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  4. 纯CSS3浮雕质感的立体文字旋转动画

    还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...

  5. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  6. css 实现div内显示两行或三行，超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  7. css3实现超出文本指定行数(指定文本长度)用省略号代替

    测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  8. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  9. (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号

    css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...

随机推荐

  1. jrebel使用

    背景与愿景:开发环境下,tomcat对热布署的支持还不够全面,致使开发人员浪费大量时间在重起服务上.为了提高开发效率,决定引入Jrebel,它对热布署的支持相对比较全面.虽然Jrebel官方号称使用它 ...

  2. Juce源代码分析（一）Juce的优势

    为什么学习Juce JUCE (Jules' Utility Class Extensions)是由Raw MaterialSoftware公布的一套基于c++的跨平台应用程序框架类库(Windows ...

  3. c++11改进我们的程序之垃圾回收（一）

    c#和java中有自己主动垃圾回收机制,.net执行时和java虚拟机能够管理分配的堆内存,在对象失去引用时自己主动回收,因此在c#和jva中,  内存管理不是大问题.c++语言没有垃圾回收机制,必须 ...

  4. jsp中excel文件的创建与读取

    1.创建excel文件//这里的jxl不是java的标准jar包,需要在项目中另外加载 import jxl.Workbook; import jxl.write.Label; import jxl. ...

  5. Java遍历Map键、值。获取Map大小的方法

    Map读取键值对,Java遍历Map的两种实现方法 第一种方法是根据map的keyset()方法来获取key的set集合,然后遍历map取得value的值 import java.util.HashM ...

  6. select点击option获取文本输入框的焦点事件

    HTML文件: <select id="secOrderNum" style="margin-bottom:10px;width:90px;" data- ...

  7. mac下使用brew安装java等应用

    可以使用brew安装很多应用,比如java,idea,iterms,sublime brew tap caskroom/versions 将会安装新的brew仓库源brew cask install ...

  8. 定义和使用EL函数

    EL为表达式语言,在EL中,允许定义和使用函数.下面将介绍如何定义和使用EL的函数. 1. 定义和使用函数 函数的定义和使用分为以下3个步骤: (1)编写一个Java类,并在该类中编写公用的静态方法, ...

  9. GUI程序设计2

    8. 按钮(JButton)使用示例 例14. 按钮使用示例. package GUI; import java.awt.BorderLayout; import java.awt.Container ...

  10. 企业版Oracle10g的安装-过程

    ylbtech-Oracle:企业版Oracle10g的安装-过程 Oracle10g的安装 在Windows操作系统上安装Oracle10g数据库的步骤如下: 0.1)从Oracle的官方网站上下载 ...