html文字两行后，就用省略号代替剩下的
一、总结
一句话总结：
实现原理很简单，将box的高度设置为行高的两倍，超出之后隐藏，这样就只有两行了，然后再用after属性绝对定位在第二行后面加几个点 ...
.style2{
position:relative;
line-height:21px;
height:42px; /*height是line-height的整数倍，防止文字显示不全*/
overflow:hidden;
}
.style2::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom:;
content: "...";
padding: 0 5px 1px 30px;
position: absolute;
right:;
}
1、一行截断效果？
注意设置宽高，剩下的就是记住用white-space(不换行)，overflow(超出部分隐藏)，text-overflow(隐藏使用的替代符号)
.font_cut{
width: 100%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
2、after属性里面如何指定内容？
content: "...";
.style2::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom:;
content: "...";
padding: 0 5px 1px 30px;
position: absolute;
right:;
}
3、after属性里面可以绝对定位么？
可以，操作after属性就和操作普通样式一样
.style2::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom:;
content: "...";
padding: 0 5px 1px 30px;
position: absolute;
right:;
}
二、html文字两行后，就用省略号代替
1、效果图
2、代码
Document.font_cut{
width: 100%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.style2{
position:relative;
line-height:21px;
height:42px; /*height是line-height的整数倍，防止文字显示不全*/
overflow:hidden;
}
.style2::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
padding: 0 5px 1px 30px;
position: absolute;
right: 0;
}
一行显示不下，就用省略号代替；一行显示不下，就用省略号代替；一行显示不下，就用省略号代替；一行显示不下，就用省略号代替；一行显示不下，就用省略号代替；一行显示不下，就用省略号代替；
HTML文字超过两行以后 就用省略号显示代替;HTML文字超过两行以后 就用省略号显示代替;HTML文字超过两行以后 就用省略号显示代替;HTML文字超过两行以后 就用省略号显示代替;HTML文字超过两行以后 就用省略号显示代替;HTML文字超过两行以后 就用省略号显示代替;
三、html文字超出两行，则显示省略号
转自或参考：html文字超出两行，则显示省略号
https://blog.csdn.net/camillezj/article/details/52767267
多行超出显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //2行
-webkit-box-orient: vertical;
注意：-webkit-line-clamp是一个 不规范的属性(unsupported WebKit property)，它没有出现在 CSS 规范草案中。只适用于WebKit内核的浏览器，因此firebox、ie等并不支持该属性。
其他浏览器做法：
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现：
文字容器样式设置：
position:relative;
line-height:1.4em;
height:4.2em; //height是line-height的整数倍，防止文字显示不全
overflow:hidden;
文字容器::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
padding: 0 5px 1px 30px;
position: absolute;
right: 0;
}
或者使用插件：js插件-Clamp.js 、 jquery插件-jQuery.dotdotdot
单行不换行：width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
css强制换行显示省略号之显示两行后显示省略号
1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...
css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
js页面文字选中后分享到新浪微博实现
demo您可以狠狠地点击这里:js文字选中分享到新浪微博demo 方法与代码 选中即分享的功能看上去比较高级,其实实现是相当简单的.其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过.这个js文字 ...
帝国CMS万能标签标题截取后自动加入省略号
帝国CMS万能标签标题截取后自动加入省略号,没有达到字数的则不加省略号完美解决方案1.打开e/class/connect.php 搜索 if(!empty($subtitle))//截取字符 大约 ...
帝国cms万能标签实现标题截取后自动加入省略号的方法
很多采用帝国CMS建站的站长都会遇到标题过长导致页面排版错乱的情况,这时候往往需要用标题截取并追加上省略号的方法予以解决.对此,帝国CMS万能标签标题截取后自动加入省略号,没有达到字数的则不加省略号可 ...
CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
CSS div内文字显示两行，超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
css文字两行或者几行显示省略号
做这个省略的问题,突然发现显示省略号是有中英文区分的 我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了 width: 250px; overflow: hidden; ...
td默认文字超出后显示..，点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
随机推荐
H-1B身份六年后的延期问题
http://www.hooyou.com/cn_version/h-1b/extension.html H-1B首次获签的在美国居留时限是三年,三年期满后还可以申请延期再续三年,总计在美国的最长时限 ...
async和await用法
原文:async和await用法 要理解async和await的用法,首先要了解Task相关知识,这里不做说明,因为这不是本文的重点. 如果你已经对Task很了解,那么如何使用async和await, ...
[编织消息框架][netty源码分析]8 Channel 实现类NioSocketChannel职责与实现
Unsafe是托委访问socket,那么Channel是直接提供给开发者使用的 Channel 主要有两个实现 NioServerSocketChannel同NioSocketChannel 致于其它 ...
python argparse用法总结
转:python argparse用法总结 1. argparse介绍 argparse是python的一个命令行解析包,非常适合用来编写可读性非常好的程序. 2. 基本用法 prog.py是我在li ...
手把手教你写vue插件并发布(二)
前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...
如何在Linux下写无线网卡的驱动【转】
转自:http://www.crifan.com/files/doc/docbook/linux_wireless/release/html/linux_wireless.html 版本:v0.3 H ...
win10下快捷命令
win10下可在win+r的输入框中: 1.gpedit.msc //本地组策略编辑器 2.regedit //注册表 3.secpol.msc //本地安全策略 4.mstsc ...
mac下搭建cocos2d－x2.2.1版本android编译环境教程
首先我们先以引擎2.2.1为例子来新建一个TestJni的项目,来作为测试例. 创建方式如下: python create_project.py -project TestJni -package o ...
lda spark 代码官方文档
http://spark.apache.org/docs/1.6.1/mllib-clustering.html#latent-dirichlet-allocation-lda http://spar ...
制作简易app个人总结
1.每次修改app.js或者其他路由js文件,都必须重启node app.js,否则修改不起作用!!! 2.
扫一扫
1330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
