css单行文本和多行文本溢出实现省略号显示
1、单行文本溢出
文本内容
<div class="singleLine">
HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld
</div>
固定文本宽度,且保证文本不换行,溢出的部分隐藏,设置text-overflow为ellipsis则溢出的文本以省略号显示
.singleLine{
width:200px;
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
显示效果如图
2、多行文本溢出
文本内容
<div class="multiLine">
HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld
</div>
多行文本显示时通过-webkit-line-clamp设置显示的行数,并且设置display为-webkit-box,-webkit-box-orient为vertical
.multiLine{
width:200px;
padding:0 10px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}
显示效果
3、跨浏览器
.imitate_ellipsis{
position:relative;
line-height:1.4em;
height:2.8em;
overflow:hidden;
width:200px;
}
.imitate_ellipsis::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:;
right:;
padding-left:20px;
background: -webkit-linear-gradient(left, transparent, #fff 0%);
background: -o-linear-gradient(right, transparent, #fff 0%);
background: -moz-linear-gradient(right, transparent, #fff 0%);
background: linear-gradient(to right, transparent, #fff 0%);
}
通过伪类::after在文本后加入省略号
css单行文本和多行文本溢出实现省略号显示的更多相关文章
- css单行文本及多行文本溢出显示省略号
关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string; 该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css单行文本与多行溢出文本的省略号问题
在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...
- CSS 实现单、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- js实现单双行文本溢出添加省略号
# 单双行文本溢出省略 ``` // 2. 当内容过多的时候,单行省略号: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- css 单行文本居中显示,多行文本左对齐
父级元素 text-align:center; 自级元素 text-align:left; display:inline-block;
- CSS3实现单行、多行文本溢出(省略号的形式出现)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
随机推荐
- P4101 [HEOI2014]人人尽说江南好
题目描述 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家),最近他 想起了小时候在江南玩过的一个游戏. 在过去,人们是要边玩游戏边填词的,比如这 ...
- Python内部类,内部类调用外部类属性,方法
一 Python中内部类 典型定义: class MyOuter: age=18 def __init__(self,name): self.name=name class MyInner: def ...
- BZOJ 1499 [NOI2005] 瑰丽华尔兹 | 单调队列优化DP
BZOJ 1499 瑰丽华尔兹 | 单调队列优化DP 题意 有一块\(n \times m\)的矩形地面,上面有一些障碍(用'#'表示),其余的是空地(用'.'表示).每时每刻,地面都会向某个方向倾斜 ...
- 【NOI 2018】冒泡排序(组合数学)
题意大概是给定一个长度为$n$的排列$p$,求有多少长度为$n$的排列满足冒泡排序的交换次数为$\frac{1}{2} \sum\limits_{i = 1}^{n}|i - p_{i}|$. 可以发 ...
- 【bzoj1194】 HNOI2006—潘多拉的盒子
http://www.lydsy.com/JudgeOnline/problem.php?id=1194 (题目链接) 题意 给出S个自动机,如果一个自动机u的所有状态是另一个自动机v的状态的子集,那 ...
- 单点登录(十五)-----实战-----cas4.2.x登录mongodb验证方式实现自定义加密
我们在前一篇文章中实现了cas4.2.x登录使用mongodb验证方式. 单点登录(十三)-----实战-----cas4.2.X登录启用mongodb验证方式完整流程 也学习参考了cas5.0.x版 ...
- bzoj 2178 自适应Simpson积分
#include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...
- Python完成RF测试用例
Robot Framework 框架是基于 Python 语言开发的,所以,它本质上是 Python 的一个库. from robot.api import TestSuite from robot. ...
- python lambda表达式与三元运算
1.三元运算 格式: 为真时的结果 if 判定条件 else 为假时的结果 #!/usr/bin/python # -*- coding: UTF-8 -*- def f(x, y): # 如果x大于 ...
- GO_03:GO语言基础语法
1. Go项目的目录结构 一般的,一个Go项目在GOPATH下,会有如下三个目录: project --- bin --- pkg --- src 其中,bin 存放编译后的可执行文件:p ...