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

在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值)。

 
 
 

 



猜你喜欢

转载自www.cnblogs.com/seedling/p/9216857.html
今日推荐