-webkit-line-clamp

概述：

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

语法：

-webkit-line-clamp：<number>

默认值： ? ?表示不清楚；

适用于：块元素

继承性：无

动画性：否

计算值：指定的值

取值：

<number>：
块元素显示的文本的行数。

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

兼容性：

支持版本\类型 IE Firefox Safari Chrome Opera
桌面 no no yes yes yes(webkit)
移动端 no no yes yes ? 
<!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. 如何设置文本不换行省略号显示等CSS常用文本属性

    如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...

  2. CSS超出2行省略号

    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; line- ...

  3. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  4. css 断行省略号，隐藏，fixed定位

    text-overflow(clip | elipsis)(显示省略号| 不显示省略号) white-space:nowrap    强制文字不断行 word-break:break-all;     ...

  5. css 多行省略号兼容移动端

    浏览器兼容css样式 -webkit-line-clamp: ; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; te ...

  6. css实现单行和多行省略号

    1.单行省略 { width:300px; overflow: hidden; text-overflow:ellipsis; whitewhite-space: nowrap; } 注:单行省略必须 ...

  7. 文本多行省略号（CSS最优方案）

    Float定位溢出隐藏 优点: 纯CSS实现,性能好,不用js调优 兼容性高 多行省略,自动显示 缺点: 单词截断 代码如下: <div class="ellipses-div&quo ...

  8. css 文字超出俩行省略号显示

    .center-titles{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ...

  9. api日常总结：前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

随机推荐

  1. fopen/fclose

    在操作文件之前要用fopen打开文件,操作完毕要用fclose关闭文件; 打开文件就是在操作系统中分配一些资源用于保存该文件的状态信息,并得到该文件的标示,以后用户程序就可以这个标志对文件做各种操作了 ...

  2. asp.net将本地Excel上传到服务器并把数据导入到数据库

    前台代码: <td class="formLabel"> 批量修改: </td> <td class="formInput"> ...

  3. Command-line interface

    A command-line interface (CLI), also known as command-line user interface, console user interface, a ...

  4. 8-3-COMPETITION

    链接:8.3比赛 这次是动态规划里的LCS,LIS,LCIS专场....... A.Common Subsequence 就是:给出两个字符串,求出其中的最长公共子序列的长度~LCS 代码: //me ...

  5. S2SH+Hibernate search出现的问题

    一  java.lang.NoSuchMethodError: org.hibernate.engine.transaction.spi.TransactionEnvironment.getJtaPl ...

  6. javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

    一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一 ...

  7. Least Common Multiple

    地址:http://www.codewars.com/kata/5259acb16021e9d8a60010af/train/python 题目: Write a function that calc ...

  8. Makefile 入门与基本语法 分类： C/C++ ubuntu 2015-05-18 11:16 466人阅读 评论(0) 收藏

    在我看来,学会写简单的Makefile,阅读较复杂的makefile,是每一个Linux程序员都必须拥有的基本素质.Makefile可以自动识别哪些源文件被更改过,需要重新编译,那些不需要.从而节省大 ...

  9. [Angular 2] Component relative paths

    Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component ...

  10. mysql免安装版使用

    打开命令行,到bin目录下,输入net start mysql 启动服务,输入mysql -u root -p回车后输入密码,进入mysql.