方法一:使用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文本溢出显示省略字符的两种常用方法的更多相关文章

  1. CSS文本溢出显示省略号

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

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

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

  3. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  4. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  5. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  6. Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式

    解析:Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式.面向字节的操作为以8位为单位对二进制的数据进行操作,对数据不进行转换,这些类都是InputStream和Out ...

  7. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  8. vue——props的两种常用方法

    vue--props的两种常用方法 1.实现父-->子的通信 举例如下: 父组件 parent.vue <children :channel="object1"> ...

  9. jQuery验证元素是否为空的两种常用方法

    这篇文章主要介绍了jQuery验证元素是否为空的两种常用方法,实例分析了两种常用的判断为空技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery验证元素是否为空的两种常用方法.分享给 ...

随机推荐

  1. js 购物车中,多件商品数量加减效果修改,实现总价随数量加减改变

    <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...

  2. Android「后台下载」Feb.24小记

    参考了CSDN上的这个文章(HERE),之前只是新开一个线程: public class DownloadThread implements Runnable{ String tarFile ; pu ...

  3. 读取每行的数据,加入到list中

    有txt文件中,每行都有一个字符串或者数据,将每行的数据转换到一个list中 例如: 1 2 3 6 实现: f = open("test1.txt",'r') list1 = [ ...

  4. margin-----总结----解析逻辑

    margin的解析逻辑 在 margin 中 top.right.bottom.left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和botto ...

  5. 详解Redis Cluster集群

    Redis Cluster是Redis的分布式解决方案,在Redis 3.0版本正式推出的,有效解决了Redis分布式方面的需求.当遇到单机内存.并发.流量等瓶颈时,可以采用Cluster架构达到负载 ...

  6. poj3050【dfs】

    题意: 5*5的矩阵里,某个点能够上下左右走,走5步,然后路径会形成一个串,问你,这个5*5里面能够形成多少个不同个串. 思路: 直接暴搜,然后对于一个串塞到set里去,然后输出set里的个数就好了 ...

  7. elasticsearch映射 mapping

    mapping的格式个应用,主要是创建索引(数据库)的时候指明type 的field类型,然后elasticsearch可以自动解析

  8. redis主从集群搭建

    一.安装redis 首先登陆官网下载压缩包,我安装的是最新版本5.X,下载地址http://download.redis.io/releases/redis-5.0.2.tar.gz. 进入文件所在目 ...

  9. 1-docker基础

    docker有三个基本概念:镜像/容器/仓库 镜像:一个完整的root文件系统,但并非一个iso的打包文件,而是使用分层存储.构建镜像时,是一层一层的.新的镜像,也可以在原有镜像上添加新层. 容器:是 ...

  10. MySQL5.5升级到5.6

    5.6的新的特性 .支持GTIDs,Failover.多线程复制. 新增binlog_row_image只记录row格式下所用字段的修改(而不是像以前一样记录全部列),节省空间等资源: master. ...