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

Posted 2020-11-19 seedling

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