多行文本超出用省略号代替,单击展开全部
这里主要讲解一个常见的文字处理程序,在我们开发的过程中,经常会遇到一段很长的文字,但是我们在页面上展示的时候,却需要他展示成几行,比如5行。
这里分享一个自己写的小DEMO,大家可以参考一下:
先看一下效果图:
(图一)
(图二)
如上“图一”所示,我们在页面加载的时候,让文字显示5行,超出的文字用省略号代替。
当我们点击文字的时候,所有的文字全部展示出来。如“图二”所示。
具体的代码如下:
<html><head><title>多行文字显示省略号</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1"><style>.context-wrap{color: #3f3f3f;white-space: normal;word-wrap: break-word;margin-top: 8px;font-size: 16px;line-height: 30px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;text-overflow: ellipsis;overflow: hidden;min-height: 30px;}.on {color: #3f3f3f;white-space: normal;word-wrap: break-word;margin-top: 8px;font-size: 16px;line-height: 30px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 0;text-overflow: ellipsis;overflow: hidden;min-height: 30px;}</style><script>window.onload = function(e){document.getElementById("test").onclick = function(e){if($("#test").hasClass("on")){$("#test").removeClass("on").addClass("context-wrap");}else{$("#test").removeClass("context-wrap").addClass("on");}};}</script></head><body><div class="context"> <div id="test" class="context-wrap">
mayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayouce,ayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayoucen,1111111111122222222222222222224444444444444444555 </div> </div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></body></html>
这里的代码虽然实现了效果,但是还是不够简洁。有小伙伴看到的话,可以提出自己的意见,在优化一下。
多行文本超出用省略号代替,单击展开全部相关推荐
- react实现多行文本超出加省略号
http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; ...
- css多行文本超出显示省略号无效解决方法
css多行文本超出显示省略号,以2行为例,网上很多解决方法,如下.之前一直采用的是这种方法,最近发现无效了.vant也是这种写法, .txt-ellipsis-2 {display:-webkit-b ...
- 单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
- after不显示_web前端入门到实战:css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
- CSS 控制单行或者多行文本超出显示省略号
1.单行文本 p {overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段 ...
- 微信小程序多行文本超出显示省略号
第一个是单行文本 width: 500rpx; display:-webkit-box; -webkit-line-clamp:1; overflow:hidden; text-overflow:el ...
- 多行文本超出部分省略号代替
贼久没来了 记一波笔记: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4 ...
- 文本超出显示省略号的方法
1.一行文本超出显示省略号的方法:text-overflow和white-space超出隐藏显示省略号 设计css样式时,遇到要使文本在一行内显示,超出则加省略号的问题解决办法: 只需要使用text- ...
- html 超出显示出来,html超出显示省略号
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法 文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: elli ...
最新文章
- Git基础教程(二)
- 生产者跟消费者问题(C++实现)
- 备抵附加账户的期末余额_会计账户的分类(二)
- linux6.5能安装的firefox,Centos6.5安装firefox
- Java harddisk pc cpu,java获得cpu使用率
- Xcode5 证书配置
- Spring源码解析(一)
- 苹果手机怎么定位安卓手机_苹果AirPods搭配安卓手机怎么样?那是相当好
- 安卓获取wifi列表_大家好,我是来给你家 WiFi 提速的
- spark core源码分析16 Shuffle详解-读流程
- JDO与Hibernate之比较(转载)
- DearMob iPhone Manager for Mac(iPhone手机数据加密传输软件)
- 各种搜索引擎及其使用技巧 效率翻倍
- Editor.md安装使用(markdown)
- DB2数据库的备份与恢复
- 解决 邮件推送ImportError: No module named aliyunsdkdm.request.v20151123.SingleSendMailRequest
- 如何通过QQ进行手机号溯源
- 三菱PLC模板程序FX5U轴FB块 使用ST语言编写的轴FB块,包含原点复归
- Python汽车管理系统源码
- 全息图算法:加权Gerchberg-Saxton算法(GSW)