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:[ ...
- JIRA安装部署说明
参考 https://blog.51cto.com/tiantiantesting/1744175 前提:已安装好JDK.MySQL JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问 ...
- json几种读取方式,ArrayList循环读取【转】
在之前写过提取json数据格式的文章,这次对jmeter读取json数据格式进行整理. 举例一个接口的response 格式如下: { "data" : { "devic ...
- vs已停止工作的解决方案
解决办法 第一步: 开始-->所有程序-->Microsoft Visual Studio 2013(2015)-->VisualStudio Tools-->VS2013(2 ...
- css兼容写法
css3 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#,direction=,strength=);/*兼 ...
- 经典SQL行列转换
-- http://www.programbbs.com/doc/4885.htm /* 标题:普通行列转换(version 2.0) 说明:普通行列转换(version 1.0)仅针对sql ser ...
- Linux系统调用接口添加简单示例
1. Linux体系结构 Linux系统的地址空间分为用户空间和内核空间,通过系统调用和硬件中断能够完成从用户空间到内核空间的转移. 2. 系统调用接口 ① 一般情况下,用户进程不能访问内核空间.Li ...
- python模块之wordcloud
wordcloud官方文档: http://amueller.github.io/word_cloud/generated/wordcloud.WordCloud.html#wordcloud.Wor ...
- python练习六十一:文件处理,读取文件内容
python练习六十一:文件处理,读取文件内容 假设要读取text.txt文件中内容 写文件(如果有文件,那直接调用就行,我这里自己先创建的文件) list1 = ['python','jave',' ...
- thinkPHP5.0 volist标签理解
{volist name="list" id="vo" offset="5" length="10"} .... {/v ...