一、
    一般情况下,HTML字符串过长时都会将超过的部分隐藏点,方法如下:

设置CSS:

.ellipsis-type{

max-width: 50px;                      //显示宽度
white-space: nowrap;                //文本不换行。
overflow: hidden;                       //超过部分隐藏

text-overflow: ellipsis;                //超过部分用...代替

cursor: pointer;                         //鼠标设置(不是必须)

}

如果要查看整个字符串,可以引用popover

<script src="/static/common/js/popover.js"></script>

<tr class='file_name'>

<td class="ellipsis" data-toggle="popover" data-content="{{ your value}}" data-placement="bottom" data-container="body" >your text</td>

</tr>

二、
    上面是通过CSS隐藏末端字符串。如果末端字符串有参考价值,可以通过js将字串中间或前部用特定字符代替。

$(".file_name").each(function(){                                                               //遍历file_name中的每个子元素
        var v = $(this).children('.ellipsis').text();
        if (v.length > 50)

{

// 用V的前20个字符+"......"+后15个字符代替V

var new_value = v.substring(0,20)+'......'+v.substring(v.length-15,v.length);
$(this).children('.name').text(new_value); //设置新的text()
}
});
---------------------
作者:carrey_0612
来源:CSDN
原文:https://blog.csdn.net/carrey_0612/article/details/80654960
版权声明:本文为博主原创文章,转载请附上博文链接!

HTML中文本过长时自动隐藏末尾部分或中间等任意部分的更多相关文章

  1. css实现文本过长时自动添加省略号

    1. 效果 2. Html <div id="main_app_content" class="container"> <div class= ...

  2. Linux中实现在系统启动时自动加载模块

    下面是以前学习Linux时写的,后来仔细研究rc.sysinit后发现,只需要修改下列地方就可以了,不必这么麻烦的: rc.sysinit中有这样的一段代码: # Load other user-de ...

  3. 关于android源码中的APP编译时引用隐藏的API出现的问题

    今天在编译android源码中的计算器APP时发现,竟然无法使用系统隐藏的API,比如android.os.ServiceManager中的API,引用这个类时提示错误,记忆中在android源码中的 ...

  4. 当td中文字过长时,显示为省略号

    当表格中的文字过长时,可选择已省略号显示.这里是用js实现的.首先获取td中的文字长度(innerText.length),如果长度超过了设定的长度,则截取内容,加上省略号显示.示例代码如下: $(f ...

  5. TextBlock 重写,当文本过长时,自动截断文本并出现Tooltip

    如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  6. 让docker中的mysql启动时自动执行sql文件

    本文提要 本文目的不仅仅是创建一个MySQL的镜像,而是在其基础上再实现启动过程中自动导入数据及数据库用户的权限设置,并且在新创建出来的容器里自动启动MySQL服务接受外部连接,主要是通过Docker ...

  7. 让docker中的mysql启动时自动执行sql

    在用docker创建mysql容器的时,有时候我们期望容器启动后数据库和表已经自动建好,初始化数据也已自动录入,也就是说容器启动后我们就能直接连上容器中的数据库,使用其中的数据了. 其实mysql的官 ...

  8. 如何在form初始化时自动隐藏FOLDER列

    方法1:直接设定PROMPT列和数据列ITEM的VISIBLE属性为No 方法2:在WHEN-NEW-FORM-INSTANCE触发器里: l_old_itm := :system.cursor_it ...

  9. 解决SpringBoot+JPA中使用set方法时自动更新数据库问题

    项目进行了三分之二了,突然出现一个很诡异的bug,数据库存储的用户表中密码信息总是自动消失一部分,头疼了几天后突然想起同事有个对低权限用户查询的用户信息向前台传送时会把密码设成null后再传输,心想是 ...

随机推荐

  1. mysql远程连接 Host * is not allowed to connect to this MySQL server

    mysql -u root -p mysql>use mysql; mysql>update user set host =’%'where user =’root’; mysql> ...

  2. Maven项目pom.xml文件简单解析

    Maven项目pom.xml简单解析 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  3. git revert 还有这个坑?

    最近也是终于开启了代码编写之旅,我只能默默地说一句,写代码的感觉,简直不能再爽! 不过也由于 git 的分支管理蛋疼懵逼很久,所以必须记录以及和大家分享一下本次坑爹的旅行. 写在前面 每个公司相比都有 ...

  4. Docker入门 第一课 --.Net Core 使用Docker全程记录

    微服务架构无疑是当前最火热的开发架构,而Docker作为微服务架构的首选工具,是我们必须要了解掌握的. 我通过一天的时间,网上查文档,了解基础概念,安装Docker,试验Docker命令,通过Dock ...

  5. Webpack+Typescript 简易配置

    教程:https://www.cnblogs.com/yasepix/p/9294499.html http://developer.egret.com/cn/github/egret-docs/ex ...

  6. rabbitMQ教程(五)rabbitmq 指令 以及解决web管理界面无法使用guest用户登录

    安装最新版本的rabbitmq(3.3.1),并启用management plugin后,使用默认的账号guest登陆管理控制台,却提示登陆失败. 翻看官方的release文档后,得知由于账号gues ...

  7. Filebeat简介

    原文地址:http://blog.51cto.com/seekerwolf/2110174 收集日志的目的是有效的利用日志,有效利用日志的前提是日志经过格式化符合我们的要求,这样才能真正的高效利用收集 ...

  8. Hadoop生态的配置

    网盘下载地址 链接: https://pan.baidu.com/s/19qWnP6LQ-cHVrvT0o1jTMg 密码: 44hs Hadoop伪分布式配置  Hadoop 可以在单节点上以伪分布 ...

  9. Maven指定编译级别

    maven默认的编译水平是1.5 单个项目单独设置 如果需要在某个项目中指定编译级别,可以在项目的pom.xml文件中配置,如下: <build> <plugins> < ...

  10. Innodb 实现高并发、redo/undo MVCC原理

    一.并发控制   因为并发情况下有可能出现不同线程对同一资源进行变动,所以必须要对并发进行控制以保证数据的同一与安全.   可以参考CPython解释器中的GIL全局解释器锁,所以说python中没有 ...