方法一:使用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. Synchronized之三:Synchronized与线程中断、线程wait

    线程中断 见<Thread之八:interrupt中断> 正如中断二字所表达的意义,在线程运行(run方法)中间打断它,在Java中,提供了以下3个有关线程中断的方法 //中断线程(实例方 ...

  2. chorme dev tools的小技巧

    1 快速文件转换 在DevTools打开的时候,你可以按下Ctrl+P来快速的寻找和打开你工程中的任意文件. 2 在源代码中搜索 Ctrl+Shift+F 即可在所有已加载的文件中查找一个特定的字符串 ...

  3. 一个不当使用fclose引发的异常

    最近服务器上一个后台传输文件的服务,经常会报出异常来,只能强行终止并重启. 昨天刚好有空,现场抓了一下dump,再把程序扔到IDA里看了一下,很快就找出原因了,原来是调用fclose时出错的. 使用C ...

  4. std::unique

    类属性算法unique的作用是从输入序列中“删除”所有相邻的重复元素. 该算法删除相邻的重复元素,然后重新排列输入范围内的元素,并且返回一个迭代器(容器的长度没变,只是元素顺序改变了),表示无重复的值 ...

  5. checkbox设置单选的的两种方式

    一.如果 <input name="ck" type="checkbox">是页面加载就有的 $("#input[name=ck]&quo ...

  6. 模板 - 动态规划 - 概率期望dp

    https://blog.csdn.net/myjs999/article/details/81022546

  7. Codeforces 1000 (A~E)

    A Codehorses T-shirts 相同长度之间互相转化即可 #include<iostream> #include<cstdio> #include<cstri ...

  8. IDEA远程调试hadoop程序

    远程调试Hadoop各组件 Hadoop学习之配置Eclipse远程调试Hadoop IDEA远程调试hadoop Hadoop 研发之远程调试详细剖析--WordCount V2.0 eclipse ...

  9. Bits Equalizer UVA - 12545

    点击打开链接 #include<cstdio> #include<cstring> /* 别看错了:0能变1,1不能变0 能完成的条件是,s与t长度相等且s中0数量和?数量之和 ...

  10. java常用类要点总结