css3多行省略号

时间：2022-09-07 23:56:17

-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. 文本超出显示省略号&sol;数字英文字母折行有关css 属性&sol;显示两行，第二行省略号显示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. 10月24日上午PHP面向对象

    面向对象 程序分为两种,一种是面向过程的,另一种是面向对象的.之前的学的都是面向过程的,按部就班的一步一步的按照顺序往下走. 面向对象: 1.什么叫做对象 一切皆为对象(一个对象由一组属性和有权对这些 ...

  2. VS2012 easyui datagrid url访问之坑

    VS2012 easyui datagrid url访问之坑 url属性放的是地址的话 返回的json格式必须有 total 和 rows,如下: {"total":2,&quot ...

  3. 双心ping GUI工具1&period;0

    双心ping GUI工具1.0该软件利用WindowsAPI提供了图形界面的ping程序,同时还可以调用DOS下的ping命令.ping成功后自动加入网址列表框及同目录下的列表文件Pinglist.i ...

  4. 浏览器的CSS Hacks

    LZ注:此文原作者是:Paul Irish(Google的前端开发工程师),本文是原文的部分译文. 我不再使用CSS Hacks了,相反的是,我将使用IE的条件判断将类应用到body标签.   但是, ...

  5. node&period;weiChat

    微信的朋友圈分享是现在流行的推广模式,最近两天尝试了一下使用微信进行商品的分享,分享结束后我可以在自己的数据库中查询到用户是否分享成功,包括用户使用微信进行支付时的成功验证.个人觉得微信上的教程有些绕 ...

  6. ASA基本配置

    拓扑如下: ASA5520# show running-config : Saved:ASA Version 8.0(2) !hostname ASA5520enable password 2KFQn ...

  7. Java：函数，类，数组之间的运用

    在我的demoe类中,我实现了以下方法: 这个类在另外一个文件,demoe.java中 public class Demoe { //计算一个数字因子的个数 public static int get ...

  8. vue-amap &vert; 基于 Vue 2&period;x 与高德的地图组件

    vue-amap | 基于 Vue 2.x 与高德的地图组件 参考:https://elemefe.github.io/vue-amap/#/

  9. SpringBoot注册Servlet、Filter、Listener

    SpringBoot默认是以jar包的方式启动嵌入式的Servlet容易来启动SpringBoot的Web应用,没有web.xml文件 因此我们可以使用以下方式来注册Servlet.Filter.Li ...

  10. bug&colon;&ast;&ast;&ast; Collection &lt&semi;&lowbar;&lowbar;NSArrayM&colon; 0x1c444d440&gt&semi; was mutated while being enumerated&period;

    崩溃提示:Terminating app due to uncaught exception 'NSGenericException', reason: '*** Collection <CAL ...

相关文章