css多行文本溢出显示省略号
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body> <div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem est libero fugit placeat distinctio deserunt ipsam eveniet, odit officiis laudantium, quos, corporis saepe earum id quia unde impedit atque quod.
</div> </body>
</html>
CSS:
div {
width:400px;
overflow:hidden;
text-overflow: ellipsis;
word-break: break-all;/*一个单词为了换行好看,允许被拆开*/
-webkit-box-orient:vertical;
-webkit-line-clamp:;
display: -webkit-box; /*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/
}
结果:
css多行文本溢出显示省略号的更多相关文章
- css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(…).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
- css多行文本溢出显示省略号(兼容ie)
在日常编写页面中,我们经常遇到内容行数过多时,需要出现 “...” 来处理.但是又要考虑IE浏览器或IE内核浏览器的兼容性. 普通实现方法: display: -webkit-box; -webkit ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
随机推荐
- php http 缓存(客户端缓存)
<?php /* * Expires:过期时间 * Cache-Control: 响应头信息 * (max-age:[秒]缓存过期时间(请求时间开始到过期时间的秒数), * s-maxage:[ ...
- Windows中报错:Fatal error in launcher: Unable to create process using '"' 的解决方案
Windows 下同时存在 Python2 和 Python3 使用 pip 时系统报错:Fatal error in launcher: Unable to create process using ...
- import与from...import...的区别
from ... import ... 的用法和直接import的区别: 1.直接使用import时,如果需要使用到导入模块内的属性和方法,必须使用模块名.属性和模块名.方法的方式进行调用 2.使用f ...
- Camtasia Studio 8卸载不了解决方法
Win7:%ProgramData%\TechSmith\Camtasia Studio 8\RegInfo.iniWinXP:”%AllUsersProfile%\Application Data\ ...
- A. Free Cash
A. Free Cash time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- stark组件之创建
stark组件之需求 仿照Django中的admin , 开发了自己的stark组件,实现类似数据库客户端的功能,对数据进行增删改查 . stark之创建 1.在项目中 创建stark应用,app01 ...
- maven set MAVEN_OPTS
http://juvenshun.iteye.com/blog/240257 https://docs.alfresco.com/5.1/tasks/alfresco-sdk-install-mave ...
- 2048小游戏(Java)(swing实现)(二)
这里是上一次的成果,只能用鼠标点,没法用键盘 最近扩充了一下知识面,实现了用键盘操控2048小游戏 但是还是不支持同时使用键盘和鼠标同时操作 import javax.swing.*; //impor ...
- 如何 将下载离线 nupkg 文件 安装到VS2017
https://www.cnblogs.com/cncc/articles/8276878.html --------------------------------------------- ...
- sf01_什么是数据结构
数据结构解决什么问题 如何在计算机中存储数据和信息,采用什么样的方法和技巧加工处理这些数据,都是数据结构需要努力解决的问题. 解决问题的步骤 使用计算机解决问题的步骤:分析具体问题得到数学模型,设计解 ...