实现文本省略:

<!-- html代码 -->

<p class="single">该文的主题思想即对自由境界的向往。朱自清当时虽置身在污浊黑暗的旧中国,但他的心灵世界则是一片澄澈明净,他的精神依然昂奋向上。朱自清把他健康高尚的审美情趣,把他对美好事物的无限热爱,将他对人生理想的不懈追求熔铸到文章中去。熔铸到诗一样美丽的语言中去。从而使整篇文章洋溢着浓浓的诗意,产生了经久不衰的艺术魅力<p>

/*css代码*/
/*单行*/
.single{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} /*多行*/
.single{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
flex-direction: column;
}

注意:如果想实现三行省略可以修改属性 -webkit-line-clamp:3

实现效效果:

css多行省略和单行省略的更多相关文章

  1. css多行省略

    单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...

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

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

  3. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  4. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  5. 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

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

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

  7. css多行省略-webkit-box-orient打包编译后失效原因

    原css代码: .dialog-for-plan .dialog-table .type>p { display: -webkit-box; -webkit-box-orient: vertic ...

  8. css 控制行数 多出的省略

    <html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...

  9. CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

    webpck不能编译这个属性-webkit-box-orient: vertical https://github.com/fanyifanbumaimeng/Articles/issues/48 / ...

随机推荐

  1. 一图解析MongoDB

    了解MongoDB,这一张图就够了: 版权所有,转载请注明出处.

  2. ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓

    现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...

  3. 2019-2020-1 20199328《Linux内核原理与分析》第十二周作业

    缓冲区溢出 2019/12/4 11:33:45 首先是安装一些用于编译的32位C程序e148 $ sudo apt-get update $ sudo apt-get install -y lib3 ...

  4. latex-列表环境

    介绍 latex 主要有三种列表环境,进行罗列的实现, 无序列表 -- itemize 有序列表 -- enumerate 描述列表 -- description 本文进行了一一介绍和演示, 同时添加 ...

  5. 怎么在java中关闭一个thread

    怎么在java中关闭一个thread 我们经常需要在java中用到thread,我们知道thread有一个start()方法可以开启一个线程.那么怎么关闭这个线程呢? 有人会说可以用Thread.st ...

  6. VulnHub靶场学习_HA: Chanakya

    HA-Chanakya Vulnhub靶场 下载地址:https://www.vulnhub.com/entry/ha-chanakya,395/ 背景: 摧毁王国的策划者又回来了,这次他创造了一个难 ...

  7. js之 DOM与BOM

    JavaScript HTML DOM (文档对象模型)(Document Object Model) 什么是DOM? DOM是W3C标准. DOM定义了访问文档的标准: “W3C文档对象模型(DOM ...

  8. 机器学习之分类回归树(python实现CART)

    之前有文章介绍过决策树(ID3).简单回顾一下:ID3每次选取最佳特征来分割数据,这个最佳特征的判断原则是通过信息增益来实现的.按照某种特征切分数据后,该特征在以后切分数据集时就不再使用,因此存在切分 ...

  9. centos6 yum安装jdk1.8+

    一.环境Linux操作系统: centos6.9 安装jdk版本: jdk1.8+ 二.安装步骤1. 检查系统是否自带有jdk[root@VM_0_11_centos ~]# rpm -qa |gre ...

  10. 图论--网络流--最大流 HDU 2883 kebab(离散化)

    Problem Description Almost everyone likes kebabs nowadays (Here a kebab means pieces of meat grilled ...