CSS3属性—— line-clamp控制文本行数
说明：
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
- text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
今天接到优化需求，帖子列表里的内容要求缩略至3行，并带‘…’省略号
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cline-clamp</title>
<style>
.box{
width: 200px;
height: 300px;
border:1px solid black;
}
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /*设置p元素最大4行，父元素需填写宽度才明显*/
text-overflow: ellipsis;
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
/*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/
word-wrap:break-word;
word-break:break-all;
} </style>
</head>
<body>
<div class="box">
<p> static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，
</p>
</div>
</body>
</html>
效果如下：
如果你标签内的是英文，英文是不会自动换行的，所以你需要让他自动换行添加如下代码即可：
word-wrap:break-word;
word-break:break-all;
当然也可以使用插件clamp.js
CSS3属性—— line-clamp控制文本行数的更多相关文章
- UltraEdit文本行数多变一和一边多
一.UltraEdit文本行数多行转换成一行 1.文本样式内容 1.qwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiopqwertyuuiop ...
- linux下统计文本行数的各种方法（二）
上一篇讲的都是统计单个文件的方法,直接在命令行执行就可以.现在试试脚本的方式,统计多个文件的行数 一.统计目录下所有文件的文件数及所有行数 脚本暂时命名为count.sh,代码如下: #!/bin/b ...
- linux下统计文本行数的各种方法
方法一:awk awk '{print NR}' test1.txt | tail -n1
- linux下统计文本行数的各种方法（一）
文件test1.txt有17行 方法一: awk '{print NR}' test1.txt | tail -n1
- linux 设置查看文本行数
在一般模式下,即摁下esc按键下的模式: 设置行数为:set nu(此处的冒号需要带上) 取消行号为:set nonu(此处的冒号需要带上)
- C# VII: 统计文本行数
本文基于StackOverflow的以下问题收集整理而成. What is the fastest waty to count newlines in a large .NET string: htt ...
- 对文本行按特定字段排序（前N个字符或后N个字符），TCPL 练习5-17
The C programming language 的关于文本行排序的问题有很多种要求的方式,在对每行的字段排序方面,最简单的是例如对前N个字符或者末位N个字符进行排序,更高一点的要求是,对特殊符号 ...
- 对文本行进行排序，新增-d（目录排序），只对字母数字空格排序（TCPL 练习5-16）
文本行的排序用到了命令行参数以及多级指针,在要求只对字母数字空格进行排序时,关键的问题点是兼容-f命令参数,也就是排序的同时忽略大小写.由于在之前的练习中,我将忽略大小写的比较方法重新写了一个函数tr ...
- [Python学习笔记-008] 使用双向链表去掉重复的文本行
用Python处理文本文件是极方便的,当文本文件中有较多的重复的行的时候,将那些重复的行数去掉并打印诸如"...<repeats X times>..."有助于更好的浏 ...
随机推荐
- webpack4 公共模块打包,怎么抽取出来一个需要经常修改的包
项目中有一个需求: 所有页面引用了一个公共ad.js 因为广告需要不断投放新渠道,所以ad.js需要经常上线更新,这样会导致打包出来的 commons.js经常更新,缓存一下无效了.所以急需将ad.j ...
- Java Web总结（二）-- 上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接 ...
- Vue.js学习总结——1
1.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...
- maven下载jar包源码配置
两个依赖,就想下mail的源码包,因该怎么 <dependencies> <dependency> <groupId>javax.mail</groupId& ...
- StringBuilder和StringBuffer的区别
Java中StringBuilder和StringBuffer的区别分析 StringBUilder是线程不安全的(线程同步访问的时候会出问题),但是效率相对较高. (String类型使用加号进行拼接 ...
- Dubbo Spring Cloud 之 HTTP 实战
上一篇文章<Spring Cloud Alibaba | Dubbo 与 Spring Cloud 完美结合>我们介绍了Dubbo Spring Cloud的基本使用,使用的服务中心为Sp ...
- 2018年蓝桥杯java b组第五题
标题:快速排序 以下代码可以从数组a[]中找出第k小的元素. 它使用了类似快速排序中的分治算法,期望时间复杂度是O(N)的. 请仔细阅读分析源码,填写划线部分缺失的内容. 我在使用(a, l, r, ...
- 用.NET做动态域名解析
用.NET做动态域名解析 动态域名解析,或DNSR,通常用于解析IP地址经常变化的域名.电信网络提供了公网IP,给广大程序员远程办公.内容分享等方面带来了极大的便利.但公网IP是动态的,它会经常变化, ...
- Scala Class etc.
Classes 一个源文件可包含多个类,每个类默认都是 public 类字段必须初始化,编译后默认是 private,自动生成 public 的 getter/setter :Person 示例 pr ...
- python3.6安装【scrapy】-最保守方法
系统:win10平台 python版本:3.6.1 1. 下载并安装 pywin32: 进入https://sourceforge.net/projects/pywin32/files/,按照下 ...