[记录] CSS 多行文本超出部分省略
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号,如下。
height: 115px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 7; //在第几行出现省略号
-webkit-box-orient: vertical;
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
[记录] CSS 多行文本超出部分省略的更多相关文章
- css控制单行或者多行文本超出显示省略号
1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...
- css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...
- 【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或 ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或优雅地实 ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- css多行文本垂直居中问题研究
css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
- CSS 多行文本溢出省略显示
文本溢出我们经常用到的应该就是text-overflow:ellipsis了,相信大家也很熟悉,但是对于多行文本的溢出处理确接触的不是很多,最近在公司群里面有同事问到,并且自己也遇到过这个问题,所以专 ...
随机推荐
- xftp找不到匹配的outgoing encryption 算法 怎么解决
alert("找不到匹配的outgoing encryption 算法"); 原因,是ssh登录本地终端缓存了相关的安全确认信息: 远端的ssh服务升级后,其对应的加密算法均作了升 ...
- bzoj4020: 未来程序·改
只需写一个解释器 第一次预处理将输入进行分词,分割出 关键字,运算符,变量/函数名,整数常量,并对变量/函数名离散化以便处理 第二次预处理建语法树,每个节点存节点类型,变量定义表等信息 运行时在语法树 ...
- C#实现mongodb自增列的使用
创建一个集合存放_id db.createCollection("counters") 加入需要自增的字段 { "_id":"productid&qu ...
- 统计python文件中的代码,注释,空白对应的行数
其实代码和空白行很好统计,难点是注释行 python中的注释分为以#开头的单行注释 或者以'''开头以'''结尾 或以"""开头以"""结尾 ...
- PAT 乙级 1029 旧键盘(20) C++版
1029. 旧键盘(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 旧键盘上坏了几个键,于是在敲一段文字的 ...
- flume 1.7在windows下的安装与运行
flume 1.7在windows下的安装与运行 一.安装 安装java,配置环境变量. 安装flume,flume的官网http://flume.apache.org/,下载地址,下载后直接解压即可 ...
- Java-Runoob-高级教程-实例-时间处理:03. Java 实例 - 获取年份、月份等
ylbtech-Java-Runoob-高级教程-实例-时间处理:03. Java 实例 - 获取年份.月份等 1.返回顶部 1. Java 实例 - 获取年份.月份等 Java 实例 以下实例演示 ...
- 自定义 MultiColumnComboBox[转]
// taken from a control written by Nishant Sivakumar. // http://www.codeproject.com/cs/combobox/DotN ...
- C语言强化——数组
打印九九乘法表 #include<stdio.h> int main() { int num = 1; for (int i = 1;i <= 9;++i) { for (int j ...
- [UE4]射击产生弹孔:Spawn Decal At Location、Spawn Decal Attached
Spawn Decal At Location.Spawn Decal Attached 在指定的位置生成一个材质贴上去 产生随意旋转角度