关于css实现单行、多行省略标记
实现单行:
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实现单行、多行省略标记的更多相关文章
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
- css 之单行文本显示省略和多行文本省略
一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...
- CSS实现单行与多行文字省略(truncation)
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...
- css多行省略和单行省略
实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- css多行省略
单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...
- 谈谈一些有趣的CSS题目-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 纯 CSS 自定义多行省略:从原理到实现
文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...
随机推荐
- 解读人:陈秋实,SP2: Rapid and Automatable Contaminant Removal from Peptide Samples for Proteomic Analyses(标准操作流程2:如何在蛋白质组学分析中快速和自动的去除肽段样品中的污染物)
发表时间:2019年4月 IF:3.950 单位: 威斯康星医学院生物化学系 威斯康星医学院生物医学质谱研究中心 物种:人(人体肾脏细胞和蛋白) 技术:肽段清理 一. 概述:(用精炼的语言描述文章的整 ...
- 7、OpenCV Python 高斯模糊
__author__ = "WSX" import cv2 as cv import numpy as np #高斯模糊 基于权重(卷积) #高斯模糊 去燥效果很好 #高斯模糊 d ...
- Jenkins+Git+Maven+Nexus+Tomcat
https://www.jianshu.com/p/d24e64559440 https://blog.csdn.net/u013322876/article/details/72637854 htt ...
- PHP删除目录下的空目录
function rm_empty_dir($path){ if(is_dir($path) && ($handle = opendir($path))!==false){ ...
- sql 日期对比
来自这里
- hdu6438 Buy and Resell 买卖物品 ccpc网络赛 贪心
题目传送门 题目描述: 有n座城市,每座城市都可以对一个物品进行一次的买进或者卖出,可以同时拥有多个物品,计算利润最大值,并且交易次数要最少.(买入卖出算两次操作) 思路: 建立两个小根堆 优先队列, ...
- 实时同步inotify+rsync
目的,要求 nfs储存服务器与backup备份服务器,数据同步,万一nfs储存服务器挂了,数据还在 实时同步备份软件服务 1)inotify 实时同步软件 2)sersync 实时同步软件 实时同步原 ...
- 磁盘 IO 和网络 IO 该如何评估、监控、性能定位和优化?
生产中经常遇到一些IO延时长导致的系统吞吐量下降.响应时间慢等问题,例如交换机故障.网线老化导致的丢包重传:存储阵列条带宽度不足.缓存不足.QoS限制.RAID级别设置不当等引起的IO延时. 一.评估 ...
- 利用RELK进行日志收集
利用RELK进行日志收集 发布时间:April 3, 2018 // 分类:运维工作,开发笔记,python // No Comments 前不久在做应急的总是遇到要求对日志进行分析溯源,当时就想到如 ...
- Message Unable to connect to SQL Server '(local)'
最近在sql server 加了一些job,但是run job的时候发生了一下错误: ssage Unable to connect to SQL Server '(local)' 问题根源:调用 T ...