实现单行:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 实现多行:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden; -webkit-line-clamp文本显示行数;
需要结合一下属性进行使用:
  display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
												

关于css实现单行、多行省略标记的更多相关文章

  1. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  2. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  3. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  4. CSS实现单行与多行文字省略(truncation)

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  5. css多行省略和单行省略

    实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...

  6. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  7. css多行省略

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

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

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

  9. 纯 CSS 自定义多行省略:从原理到实现

    文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...

随机推荐

  1. tomcat8性能优化

    在tomcat/catalina.sh中加入下面的配置,内存要根据机器实际情况配置,如果配置内存太大了有可能机器很慢. JAVA_OPTS="-server -Xms512m -Xmx512 ...

  2. Orcale创建函数(function)

    Oraclec创建函数的语法规则 create or replace function  函数名 (参数名1 参数类型,参数名2 参数类型)  return number  is Result num ...

  3. linux物理内存管理

    1.为什么需要连续的物理内存: Linux内核管理物理内存是通过分页机制实现的,它将整个内存划分成无数个4k(在i386体系结构中)大小的页,从而分配和回收内存的基本单位便是内存页了.利用分页管理有助 ...

  4. 安装 zookeeper

    https://www.w3cschool.cn/zookeeper/zookeeper_cli.html ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个 ...

  5. [ZJOI2018]历史(LCT)

    这篇还发了洛谷题解 [Luogu4338] [BZOJ5212] 题解 题意 给出一棵树,给定每一个点的 \(access\) 次数,计算轻重链切换次数的最大值,带修改. 先考虑不带修改怎么做 假设 ...

  6. P3166 [CQOI2014]数三角形

    传送门 直接求还要考虑各种不合法情况,不好计数 很容易想到容斥 把所有可能减去不合法的情况剩下的就是合法情况 那么我们只要任取不同的三点就是所有可能,不合法情况就是三点共线 对于两点 $(x_1,y_ ...

  7. linux中firewall与iptables防火墙服务

    火墙firewall-cmd --state 查看火墙的状态firewall-cmd --get-active-zones 目前所处的域firewall-cmd --get-default-zone ...

  8. Vue 中怎么发起请求(二)

    fetch 是新一代XMLHttpRequest的一种替代方案.无需安装其他库.可以在浏览器中直接提供其提供的api轻松与后台进行数据交互. 基本用法: 1 fetch(url,{parmas}).t ...

  9. NIOGoodDemo

    Java NIO是在jdk1.4开始使用的,它既可以说成“新I/O”,也可以说成非阻塞式I/O.下面是java NIO的工作原理: 1. 由一个专门的线程来处理所有的 IO 事件,并负责分发. 2. ...

  10. springMVC初探视图解析器——InternalResourceViewResolver

    springmvc在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就需要通过视图解析器. springmvc里提供了多个视图解析器,InternalResourceViewResolver就 ...