在span中实现显示某段内容,固定其长度,多余部分用省略号代替,这样就用到html的title属性;

如:<span title="value"></span>

title属性:其值是text,属性描述是规定元素的工具提示文本,意思就是鼠标移到元素上时显示title中的内容;

以span为例实现上述功能:

html:

<div>
  <span class="basic-l left10">筛选标签:</span>
  <span class="basic-r" style='width:120px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;' id="showLabelAndAttrName" title=""></span>
</div>

js:

$("#showLabelAndAttrName").text("测试标签1-测试标签属性1、测试标签属性2");
$("#showLabelAndAttrName").attr("title","测试标签1-测试标签属性1、测试标签属性2");

结果展示:

注:样式style中的white-space:nowrap;为规定段落中的文本不换行;text-overflow:ellipsis;为当文本内容溢出时显示省略标记;overflow:hidden;为超出宽度后就隐藏

为title属性赋值使用$("#id").attr("title",title值)。



----------------------------------------------------------------------------------------以下为6.27追加----------------------------------------------------------------------------------------

在js中设置显示长度超出部分用省略号,其后有"查看更多"连接,点击详情展示全部信息,再次点击则关闭展示。

html:

<div>
  <span class="basic-l left10">筛选标签:</span>
  <span class="basic-r"id="showLabelAndAttrName" title=""></span>
  <span class="basic-r" id="showSelectLabel" style="display:none;margin-left: 113px;"></span>
  <a id="showHideLabel" onclick="showHideLabel()" style="display:none;">查看更多</a></div>

其中:

<span class="basic-r" id="showSelectLabel" style="display:none;margin-left: 113px;"></span>
<a id="showHideLabel" onclick="showHideLabel()" style="display:none;">查看更多</a>

<span></span>标签为要显示的所有内容;<a></a>标签为查看更多连接;且全部隐藏。

js:

var allLabelAttr = "测试标签测试标签测试标签测试标签测试标签测试标签测试标签测试标签测试标签测试标签";
if (allLabelAttr.length > 20) {
  //截取固定长度
  var allLabelAttrCut = allLabelAttr.substring(0, 20);
  //为隐藏<span>标签赋值--全部
  $("#showSelectLabel").text(allLabelAttr);
  //为非隐藏<span>标签赋值--截取固定长度
  $("#showLabelAndAttrName").text(allLabelAttrCut+"...");
  //显示连接标签<a>
  $("#showHideLabel").toggle();
} else {
  $("#showLabelAndAttrName").text(allLabelAttr);
}
//点击查看更多调用函数
function showHideLabel(){
$("#showSelectLabel").toggle();
}

结果展示:

  点击“查看更多”

从页面效果上看非隐藏<span>标签值还存在,且"查看更多"连接在点击是也会下移到隐藏的<span>初,如果根据非隐藏<span>中的id把值去掉也不能解决"查看更多"连接下移;
那么可以使用删除和新增标签来解决;修改后的代码如下:
html:在第一个<span>中的class中加了一个addLabel
<div>
  <span class="basic-l left10 addLabel">筛选标签:</span>
  <span class="basic-r" id="showLabelAndAttrName" title=""></span>
  <span class="basic-r" id="showSelectLabel" style="display:none;"></span>
  <a id="showHideLabel" onclick="showHideLabel()" style="display:none;">查看更多</a>
</div>

js:

var allLabelAttr = "测试标签测试标签测试标签测试标签测试标签测试标签测试标签测试标签测试标签测试标签";
if (allLabelAttr.length > 20) {
  //截取固定长度
  allLabelAttrCut = allLabelAttr.substring(0, 20);
  //为隐藏<span>标签赋值--全部
  $("#showSelectLabel").text(allLabelAttr);
  //为非隐藏<span>标签赋值--截取固定长度
  $("#showLabelAndAttrName").text(allLabelAttrCut+"...");
  //显示连接标签<a>
  $("#showHideLabel").toggle();
} else {
  $("#showLabelAndAttrName").text(allLabelAttr);
}
//点击查看更多调用函数
var allLabelAttrCut = "";//截取固定长度,全局变量
var flag = true;//点击标识;默认true,点击变为false,再点击变为true
function showHideLabel(){ //定义非隐藏标签;第一次点击删除html中的此标签,再次点击把此标签添加到原来的html处
var span = $("<span class='basic-r' id='showLabelAndAttrName' title=''>"+allLabelAttrCut+"..."+"</span>");
if (flag) {
//删除html中非隐藏标签
$("#showLabelAndAttrName").remove();
flag = false;
} else {//截取固定长度有值
//添加标签到html中
$(".addLabel").after(span);
flag = true
}
$("#showSelectLabel").toggle();
}

这样就可以把上述所说的问题解决了;效果展示如下:

未点击

已点击

注:js中使用了两个函数分别是toggle()和after();
toggle()可用作切换元素的可见状态;当前元素可见,那么触发后就会隐藏,如果元素不可见出发后则变为可见。
该方法版本 1.8 中被废弃,在版本 1.9 中被移除。
after()在被选元素后插入指定元素;与之相反的是before()。
												

span标签中显示固定长度,超出部分用省略号代替,光标放到文字上显示全部的更多相关文章

  1. 解决MVC中JSON字符长度超出限制的异常

    解决MVC中JSON字符长度超出限制的异常 解决方法如下: <configuration> <system.web.extensions> <scripting> ...

  2. Bootstrap做的HTML页面在本地IE打开正常,放到服务器上显示就不正常了

    <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Com ...

  3. html 固定长度 超出长度 显示省略号

    a{         width: 80px;/* 要显示文字的宽度 */         float: left;/* 左对齐,不设置的话只在IE下好用 */         overflow: h ...

  4. css限制显示字数,文字长度超出部分用省略号表示【转】

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的 ...

  5. php截取富文本框中的固定长度的字符

    ai,哎怎么赶脚自己写东西越来越小儿科了呢,现在连这个问题都找了好半天 因为后台是的内容是富文本编辑器编辑的,前台我傻逼的直接截取了字符串,然后样式啥的都乱了,找了半天是因为富文本的问题 其实解决办法 ...

  6. 诡异的小bug 自动生成font标签包裹span标签中的文字

    某天测试自己写的网站的时候突然发现页面上一些文字排版出现了一些奇怪的错乱,在控制台发现错乱的文字被font标签包裹着 ,但是代码中根本没用用到font标签 后来发现是因为自己不小心点了谷歌浏览器地址栏 ...

  7. MVC中JSON字符长度超出限制

    本文导读:在MVC中通过JsonResult返回JSON字符串时,如果字符串长度过长,会抛出使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错,字符串的长度超过了为 ...

  8. 文字过多以省略号代替,放在文字上会显示title信息提示

    第一种: <td style="text-align:left; word-wrap:break-word;" title="${b.remarks}"& ...

  9. ie下li标签中span加float:right不换行问题解决方案

    在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...

随机推荐

  1. 基于Docker + Consul + Nginx + Consul-Template的服务负载均衡实现(转)

    转:https://www.jianshu.com/p/fa41434d444a 前言 上一篇文章使用 Consul 和 Registrator 在 docker 的容器环境中搭建了服务注册和发现集群 ...

  2. Xamarin图表开发基础教程(2)OxyPlot框架

    Xamarin图表开发基础教程(2)OxyPlot框架 OxyPlot图表设计 OxyPlot是一个基于.Net的跨平台图表库.该图表库也支持Xamarin应用开发.该组件支持多种类型的图表.本章将主 ...

  3. Leetcode: Most Stones Removed with Same Row or Column

    On a 2D plane, we place stones at some integer coordinate points. Each coordinate point may have at ...

  4. mysql 1045

    1.sudo gedit /etc/my.cnf 2.加入 skip-grant-tables 3.直接登录,输密码时回车 mysql -u root -p 4.修改密码 use mysql; upd ...

  5. 实现不同的项目,用不同的git 账号提交

    可以全局配置一个git 账户名和密码,然后在具体项目里单独配置一个账户名和密码 例如: git config --global user.name "winyh" git conf ...

  6. Vue学习笔记十二:vue-resource的基本使用

    目录 HTML 浏览器效果 Vue不提倡使用操作DOM,所以Jquery不使用了,ajax也不使用了.所以,Vue给我们提供了一种和ajax差不多功能的指令,vue-resource HTML < ...

  7. Angular cookies

    参考地址:https://stackoverflow.com/questions/34298133/angular-cookies/36093800#36093800 @Component({ sel ...

  8. WPF ComboBox(转)

    WPF ComboBox 创建一个ComboBox控件,并设置ComboBox控件的名称,高度,宽度.及设置ComboBox的垂直和水平对齐. <ComboBox Name="Comb ...

  9. 为做个程序员英语字典,我处理了StackOverflow和HackerNews10年5千万条数据

    有点标题党,不过都说都真实的.英语技能对开发员人员至关重要.所有人都不喜欢背单词,但更惨的是背住的单词发现没怎么用,又慢慢地忘记了.本来计划给自己做个开发人员常用单词表,感觉可能对其它人也有用,所以就 ...

  10. gluster设置日志级别

    glusterd --log-level WARNING #将日志级别设定为warning gluster --log-level=ERROR volume status #查看日志级别的状态 glu ...