css多行省略
单行省略就不用说了,用css实现非常简单,兼容性还非常好。但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 。。。 代替,且不说好不好,万一哪天PM说要改成3行,UI说这个字体改大一点,又得去算一遍,可谓是苦不堪言。
好在有css3,css3提供了实现完美的多行省略方法,本文已scss为例
@mixin ellipsis($lineCount: 2) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $lineCount;
line-clamp: $lineCount;
-webkit-box-orient: vertical;
}
咋们想要几行省略的时候直接调用这个方法,传入行数,就能完美实现,不需要去计算。
但是,但是,,兼容性一直是个问题啊,可以看出,必须要加上前缀才能生效,就不说IE了,就连低端的Android手机都不兼容,真是头疼。。。
难道就没有别的办法了吗?
no!!css 是博大精深的,尤其是预编译css工具更强大,例如下面就是 scss的写法,其他less,sass类似
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white) {
overflow: hidden;
position: relative;
line-height: $lineHeight;
max-height: $lineHeight * $lineCount;
text-align: justify;
&:before {
content: '...';
width: 1em;
position: absolute;
right:;
bottom:;
background-color: $bgColor;
}
&:after {
content: '';
position: absolute;
right:;
width: 1em;
height: 1em;
margin-top: 0.5em;
background: $bgColor;
}
}
简单解释一下,
lineHeight 就是一行的高度,便于计算高度
lineCount 需要几行省略
bgColor 背景颜色
就是巧妙的运用了高度的原理,在没有达到高度的时候显示的是 after,当超出高度的时候显示before 。
补充js实现多行文本溢出
const p = document.querySelector('p')
let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g)
while (p.scrollHeight > p.clientHeight) {
words.pop()
p.innerHTML = words.join('') + '...'
}
<p>这是一段测试文字,this is some test text,测试文字,测试文字测 </p>
使用split + 正则表达式将单词与单个文字切割出来存入words
加上 '...'
判断scrollHeight与clientHeight,超出的话就从words中pop一个出来
css多行省略的更多相关文章
- css多行省略和单行省略
实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...
- css多行省略-webkit-box-orient打包编译后失效原因
原css代码: .dialog-for-plan .dialog-table .type>p { display: -webkit-box; -webkit-box-orient: vertic ...
- 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 / ...
- 你不知道的css高级应用三种方法——实现多行省略
前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...
- 黑科技:CSS定制多行省略
转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初 ...
- 纯 CSS 自定义多行省略:从原理到实现
文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...
- 黑科技:纯CSS定制文本省略
作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...
- css多行显示省略号
首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
随机推荐
- (2018 Multi-University Training Contest 3)Problem D. Euler Function
//题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6322 //题目大意:给定 k,求第 k 小的数 n,满足 φ(n) 是合数.显然 φ(1) = 1 ...
- io 的一些简单说明及使用
io 流简述: i->inputStream(输入流) o->outputStream (输出流) IO流简单来说就是Input和Output流,IO流主要是用来处理设备之间的数据传输, ...
- mysql 的存储过程 循环 变更某个表里的字段
/*Navicat MySQL Data Transfer Source Server : localhost_3306Source Server Version : 50505Source Host ...
- 基于Java Instrument的Agent实现
使用 Instrumentation,使得开发者可以构建一个独立于应用程序的代理程序(Agent),用来监测和协助运行在 JVM 上的程序,甚至能够替换和修改某些类的定义.有了这样的功能,开发者就可以 ...
- WPF自定义用户控件不显示
1,Themes\Generic.xaml最好不要更名 "Generic.xaml"这个名称并非偶然通过上面的叙述,你可能会有冲动将Generic.xaml中的Style代码剪切出 ...
- Java 实现ftp 文件上传、下载和删除
本文利用apache ftp工具实现文件的上传下载和删除.具体如下: 1.下载相应的jar包 commons-net-1.4.1.jar 2.实现代码如下: public class FtpUtils ...
- Python 语法2
文档字符串,这个只能是用于紧跟函数第二行的内容. 输出文档说明的部分,代码格式是 函数名称.(dot)__(双下划线)doc__(双下划线) ///////////////////////////// ...
- 从输入URL按下回车到页面展现,中间发生了什么?
从输入URL按下回车到页面展现,总的来说发生了一下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器 ...
- 洛谷 P1047 校门外的树
#include<iostream> #include<vector> #include<algorithm> using namespace std; ]; in ...
- Git克隆代码后更新代码上传至服务器
首先在本地新建一个文件夹,鼠标右键点击Git clone(熟悉命令的可以直接在Git Bsah Here 里输入命令进行克隆), 点击后在弹框中输入服务器url后点击ok ...