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单行文本和多行文本溢出实现省略号显示的更多相关文章

  1. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

  2. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  3. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  4. CSS 实现单、多行文本溢出显示省略号(…)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  5. js实现单双行文本溢出添加省略号

    # 单双行文本溢出省略 ``` // 2. 当内容过多的时候,单行省略号: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...

  6. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  7. css 单行文本居中显示,多行文本左对齐

    父级元素 text-align:center; 自级元素 text-align:left; display:inline-block;

  8. CSS3实现单行、多行文本溢出(省略号的形式出现)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

随机推荐

  1. P4101 [HEOI2014]人人尽说江南好

    题目描述 小 Z 是一个不折不扣的 ZRP(Zealot Round-game Player,回合制游戏狂热玩家),最近他 想起了小时候在江南玩过的一个游戏. 在过去,人们是要边玩游戏边填词的,比如这 ...

  2. Python内部类,内部类调用外部类属性,方法

    一 Python中内部类 典型定义: class MyOuter: age=18 def __init__(self,name): self.name=name class MyInner: def ...

  3. BZOJ 1499 [NOI2005] 瑰丽华尔兹 | 单调队列优化DP

    BZOJ 1499 瑰丽华尔兹 | 单调队列优化DP 题意 有一块\(n \times m\)的矩形地面,上面有一些障碍(用'#'表示),其余的是空地(用'.'表示).每时每刻,地面都会向某个方向倾斜 ...

  4. 【NOI 2018】冒泡排序(组合数学)

    题意大概是给定一个长度为$n$的排列$p$,求有多少长度为$n$的排列满足冒泡排序的交换次数为$\frac{1}{2} \sum\limits_{i = 1}^{n}|i - p_{i}|$. 可以发 ...

  5. 【bzoj1194】 HNOI2006—潘多拉的盒子

    http://www.lydsy.com/JudgeOnline/problem.php?id=1194 (题目链接) 题意 给出S个自动机,如果一个自动机u的所有状态是另一个自动机v的状态的子集,那 ...

  6. 单点登录(十五)-----实战-----cas4.2.x登录mongodb验证方式实现自定义加密

    我们在前一篇文章中实现了cas4.2.x登录使用mongodb验证方式. 单点登录(十三)-----实战-----cas4.2.X登录启用mongodb验证方式完整流程 也学习参考了cas5.0.x版 ...

  7. bzoj 2178 自适应Simpson积分

    #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...

  8. Python完成RF测试用例

    Robot Framework 框架是基于 Python 语言开发的,所以,它本质上是 Python 的一个库. from robot.api import TestSuite from robot. ...

  9. python lambda表达式与三元运算

    1.三元运算 格式: 为真时的结果 if 判定条件 else 为假时的结果 #!/usr/bin/python # -*- coding: UTF-8 -*- def f(x, y): # 如果x大于 ...

  10. GO_03:GO语言基础语法

    1. Go项目的目录结构 一般的,一个Go项目在GOPATH下,会有如下三个目录: project   --- bin   --- pkg   --- src 其中,bin 存放编译后的可执行文件:p ...