html文本溢出显示省略字符的两种常用方法
方法一:使用CSS溢出省略的方式解决
解决效果如下:
css代码:
display: -webkit-box;
display: -moz-box;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp:2; /*显示行数*/
方法二:使用jQuery截取替换文本内容的方式解决
解决效果如下:
js代码:
$(".text").each(function() {
if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
$(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
//从0到80开始替换,将剩余文本内容替换为"..."
}
})
上述两种方法作用在文本内容的类名即可。
html文本溢出显示省略字符的两种常用方法的更多相关文章
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式
解析:Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式.面向字节的操作为以8位为单位对二进制的数据进行操作,对数据不进行转换,这些类都是InputStream和Out ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- vue——props的两种常用方法
vue--props的两种常用方法 1.实现父-->子的通信 举例如下: 父组件 parent.vue <children :channel="object1"> ...
- jQuery验证元素是否为空的两种常用方法
这篇文章主要介绍了jQuery验证元素是否为空的两种常用方法,实例分析了两种常用的判断为空技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery验证元素是否为空的两种常用方法.分享给 ...
随机推荐
- js 购物车中,多件商品数量加减效果修改,实现总价随数量加减改变
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...
- Android「后台下载」Feb.24小记
参考了CSDN上的这个文章(HERE),之前只是新开一个线程: public class DownloadThread implements Runnable{ String tarFile ; pu ...
- 读取每行的数据,加入到list中
有txt文件中,每行都有一个字符串或者数据,将每行的数据转换到一个list中 例如: 1 2 3 6 实现: f = open("test1.txt",'r') list1 = [ ...
- margin-----总结----解析逻辑
margin的解析逻辑 在 margin 中 top.right.bottom.left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和botto ...
- 详解Redis Cluster集群
Redis Cluster是Redis的分布式解决方案,在Redis 3.0版本正式推出的,有效解决了Redis分布式方面的需求.当遇到单机内存.并发.流量等瓶颈时,可以采用Cluster架构达到负载 ...
- poj3050【dfs】
题意: 5*5的矩阵里,某个点能够上下左右走,走5步,然后路径会形成一个串,问你,这个5*5里面能够形成多少个不同个串. 思路: 直接暴搜,然后对于一个串塞到set里去,然后输出set里的个数就好了 ...
- elasticsearch映射 mapping
mapping的格式个应用,主要是创建索引(数据库)的时候指明type 的field类型,然后elasticsearch可以自动解析
- redis主从集群搭建
一.安装redis 首先登陆官网下载压缩包,我安装的是最新版本5.X,下载地址http://download.redis.io/releases/redis-5.0.2.tar.gz. 进入文件所在目 ...
- 1-docker基础
docker有三个基本概念:镜像/容器/仓库 镜像:一个完整的root文件系统,但并非一个iso的打包文件,而是使用分层存储.构建镜像时,是一层一层的.新的镜像,也可以在原有镜像上添加新层. 容器:是 ...
- MySQL5.5升级到5.6
5.6的新的特性 .支持GTIDs,Failover.多线程复制. 新增binlog_row_image只记录row格式下所用字段的修改(而不是像以前一样记录全部列),节省空间等资源: master. ...