如果实现单行文本的溢出显示省略号同学们应该都知道用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浏览器及移动端;

注:

    1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
    2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

[记录] CSS 多行文本超出部分省略的更多相关文章

  1. css控制单行或者多行文本超出显示省略号

    1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...

  2. css实现单行、多行文本超出显示省略号

    前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...

  3. 【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或 ...

  4. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  5. 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实 ...

  6. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  7. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  8. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  9. CSS 多行文本溢出省略显示

    文本溢出我们经常用到的应该就是text-overflow:ellipsis了,相信大家也很熟悉,但是对于多行文本的溢出处理确接触的不是很多,最近在公司群里面有同事问到,并且自己也遇到过这个问题,所以专 ...

随机推荐

  1. xftp找不到匹配的outgoing encryption 算法 怎么解决

    alert("找不到匹配的outgoing encryption 算法"); 原因,是ssh登录本地终端缓存了相关的安全确认信息: 远端的ssh服务升级后,其对应的加密算法均作了升 ...

  2. bzoj4020: 未来程序·改

    只需写一个解释器 第一次预处理将输入进行分词,分割出 关键字,运算符,变量/函数名,整数常量,并对变量/函数名离散化以便处理 第二次预处理建语法树,每个节点存节点类型,变量定义表等信息 运行时在语法树 ...

  3. C#实现mongodb自增列的使用

    创建一个集合存放_id db.createCollection("counters") 加入需要自增的字段 { "_id":"productid&qu ...

  4. 统计python文件中的代码,注释,空白对应的行数

    其实代码和空白行很好统计,难点是注释行 python中的注释分为以#开头的单行注释 或者以'''开头以'''结尾 或以"""开头以"""结尾 ...

  5. PAT 乙级 1029 旧键盘(20) C++版

    1029. 旧键盘(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 旧键盘上坏了几个键,于是在敲一段文字的 ...

  6. flume 1.7在windows下的安装与运行

    flume 1.7在windows下的安装与运行 一.安装 安装java,配置环境变量. 安装flume,flume的官网http://flume.apache.org/,下载地址,下载后直接解压即可 ...

  7. Java-Runoob-高级教程-实例-时间处理:03. Java 实例 - 获取年份、月份等

    ylbtech-Java-Runoob-高级教程-实例-时间处理:03. Java 实例 - 获取年份.月份等 1.返回顶部 1. Java 实例 - 获取年份.月份等  Java 实例 以下实例演示 ...

  8. 自定义 MultiColumnComboBox[转]

    // taken from a control written by Nishant Sivakumar. // http://www.codeproject.com/cs/combobox/DotN ...

  9. C语言强化——数组

    打印九九乘法表 #include<stdio.h> int main() { int num = 1; for (int i = 1;i <= 9;++i) { for (int j ...

  10. [UE4]射击产生弹孔:Spawn Decal At Location、Spawn Decal Attached

    Spawn Decal At Location.Spawn Decal Attached 在指定的位置生成一个材质贴上去 产生随意旋转角度