JS文本中间显示省略号
众所周知,文本溢出显示省略号用CSS就可以:
单行文本:
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- display:block;
多行文本:
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
如果想中间显示省略号呢??
现在需求是,一段文本很长,但最后有一个关键词很重要,而且改关键词有括号括起来的,需要显示出来,所以如果文本过长,不单只做省略号处理,还要把括号里面的内容显示出来。
- // 中间显示省略号,截取显示括号内容
- var str = $(".text").text();
- var last = 0;
- var all = str.length;
- var fisrt = str.substring(0,6);
- // 没有中文括号(
- if (str.lastIndexOf('(') == -1) {
- // 也没有英文括号(
- if (str.lastIndexOf('(') == -1) {
- last = all - 5;
- }else{
- // 有英文括号(,就从英文括号开始截取
- last = str.lastIndexOf('(');
- }
- }else{
- last = str.lastIndexOf('(');
- }
- // 如果长度大于13个字符才显示省略号
- if (all > 13) {
- $(".text").text(fisrt+" ... "+str.substring(last,all));
- }
上面的代码意思是:如果文本长度大于13个字符、文本内包含中文或英文括号就会截取括号到最后一个字符的内容,默认截取前6个字符跟省略号...拼接起来,得到最终的中间省略号,前面6个字,后显示括号内容的效果。
最后:
网上看了好像css没有显示前面跟后面并且中间显示省略号的属性,所以用js截取拼接得到对应的效果。
JS文本中间显示省略号的更多相关文章
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
- ZH奶酪:HTML元素文本溢出显示省略号(...)
一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...
- css/js 超出部分显示省略号
1.js方法 function cutString(str, len) { //length属性读出来的汉字长度为1 if (str.length * 2 <= len) { return st ...
- css实现文本溢出显示省略号
看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...
随机推荐
- P3185 [HNOI2007]分裂游戏
$ \color{#0066ff}{ 题目描述 }$ 聪聪和睿睿最近迷上了一款叫做分裂的游戏. 该游戏的规则试: 共有 n 个瓶子, 标号为 0,1,2.....n-1, 第 i 个瓶子中装有 p[i ...
- Reviewing notes 1.1 of Analytic geometry
Chapter 1 Vector Algebra ♦ Vector Space Vector and vector space A vector is described as a quantity ...
- 01、前端需要注意哪些SEO?
1.前端需要注意哪些SEO? 1)设置网站TDK标签的设置 2)图片img标签必须加上alt属性 3)h1~h6标签合理使用 4)a标签增加rel="nofollow" 5) 安装 ...
- Android 给app加入百度地图
1.获取sha1值 (1)win+R进入cmd窗口 (2)输入以下代码 C:\SoftApplication\javajdk\jdk1.8.0_151\bin>keytool -list -v ...
- c3m快速入门
- 洛谷 P4568 [JLOI2011]飞行路线
题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的 ...
- win10 oracle11g安装问题:INS-13001环境不满足最低要求
打开database文件夹,找到stage,然后cvu,找到cvu_prereq.xml文件,用记事本打开,增添下面内容: <OPERATING_SYSTEM RELEASE="6.2 ...
- LOJ6503. 「雅礼集训 2018 Day4」Magic(容斥原理+NTT)
题目链接 https://loj.ac/problem/6503 题解 题中要求本质不同的序列数量,不太好搞.我们考虑给相同颜色的牌加上编号,这样所有牌都不相同.那么如果我们求出了答案,只需要将答案除 ...
- Action执行时间过滤器
public class AccessStatisticsAttribute : ActionFilterAttribute { /// <summary> /// log4net 日志 ...
- npm install 卡住的时候的处理
[From] http://www.eguidedog.net/doc/what-to-do-when-npm-install-hangs.php 翻译一下,npm install 经常卡在下载某个包 ...