HTML中文本过长时自动隐藏末尾部分或中间等任意部分
一、
一般情况下,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中文本过长时自动隐藏末尾部分或中间等任意部分的更多相关文章
- css实现文本过长时自动添加省略号
1. 效果 2. Html <div id="main_app_content" class="container"> <div class= ...
- Linux中实现在系统启动时自动加载模块
下面是以前学习Linux时写的,后来仔细研究rc.sysinit后发现,只需要修改下列地方就可以了,不必这么麻烦的: rc.sysinit中有这样的一段代码: # Load other user-de ...
- 关于android源码中的APP编译时引用隐藏的API出现的问题
今天在编译android源码中的计算器APP时发现,竟然无法使用系统隐藏的API,比如android.os.ServiceManager中的API,引用这个类时提示错误,记忆中在android源码中的 ...
- 当td中文字过长时,显示为省略号
当表格中的文字过长时,可选择已省略号显示.这里是用js实现的.首先获取td中的文字长度(innerText.length),如果长度超过了设定的长度,则截取内容,加上省略号显示.示例代码如下: $(f ...
- TextBlock 重写,当文本过长时,自动截断文本并出现Tooltip
如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...
- 让docker中的mysql启动时自动执行sql文件
本文提要 本文目的不仅仅是创建一个MySQL的镜像,而是在其基础上再实现启动过程中自动导入数据及数据库用户的权限设置,并且在新创建出来的容器里自动启动MySQL服务接受外部连接,主要是通过Docker ...
- 让docker中的mysql启动时自动执行sql
在用docker创建mysql容器的时,有时候我们期望容器启动后数据库和表已经自动建好,初始化数据也已自动录入,也就是说容器启动后我们就能直接连上容器中的数据库,使用其中的数据了. 其实mysql的官 ...
- 如何在form初始化时自动隐藏FOLDER列
方法1:直接设定PROMPT列和数据列ITEM的VISIBLE属性为No 方法2:在WHEN-NEW-FORM-INSTANCE触发器里: l_old_itm := :system.cursor_it ...
- 解决SpringBoot+JPA中使用set方法时自动更新数据库问题
项目进行了三分之二了,突然出现一个很诡异的bug,数据库存储的用户表中密码信息总是自动消失一部分,头疼了几天后突然想起同事有个对低权限用户查询的用户信息向前台传送时会把密码设成null后再传输,心想是 ...
随机推荐
- 2018Action Recognition from Skeleton Data via Analogical Generalization over Qualitative Representations
论文标题: 来源/作者机构情况: Northwestern University Thirty-Second AAAI Conference on Artificial Intelligence, 2 ...
- AI matplotlib
matplotlib.pyplot plot(x, y):画点 show:展示
- 洛谷 P1451 求细胞数量
题目链接 https://www.luogu.org/problemnew/show/P1451 题目描述 一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右若还是细胞数字 ...
- Docker存储卷(V18.X)
简介 介绍 Docker的存储卷称之为volume,本质上容器上的一个或者多个目录,而这些目录绕过了联合文件系统,与宿主机中的目录或者其他容器目录进行了绑定关系,这种绑定关系可以看作Linux的mou ...
- Ueditor使用以及遇到的问题
原来用的是Kindeditor这个编辑器,但很久没更新了,最新版是13年更新的.现在要换成百度的Ueditor, 在这里记录Ueditor的使用流程和遇到的问题. 一.下载 1.Ueditor官网 这 ...
- 朱晔的互联网架构实践心得S1E7:三十种架构设计模式(上)
朱晔的互联网架构实践心得S1E7:三十种架构设计模式(上) [下载本文PDF进行阅读] 设计模式是前人通过大量的实践总结出来的一些经验总结和最佳实践.在经过多年的软件开发实践之后,回过头来去看23种设 ...
- 朱晔的互联网架构实践心得S1E2:屡试不爽的架构三马车
朱晔的互联网架构实践心得S1E2:屡试不爽的架构三马车 [下载本文PDF进行阅读] 这里所说的三架马车是指微服务.消息队列和定时任务.如下图所示,这里是一个三驾马车共同驱动的一个立体的互联网项目的架构 ...
- 如何在C#中使用Dapper(译)
前言: 对象关系映射(ORM)已经被使用了很长时间,以解决在编程过程中对象模型与数据模型在关系数据库中不匹配的问题. Dapper是由Stack OverFlow团队开发的开源的,轻量级的ORM.相比 ...
- 二维数组中的查找问题--剑指offer面试题3
题目:在一个二维数组中,对每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. // 二维数组中的查找 ...
- Python_每日习题_0004_一年中的第几天
# 题目 输入某年某月某日,判断这一天是这一年的第几天? # 程序分析 特殊情况,闰年时需考虑二月多加一天: def isLeapYear(y): return (y%400==0 or (y%4== ...