如何使一个DIV中的多余字段用省略号来代替，并且在鼠标移到该div上时省略号所代替的字段全部显示出来？

Posted 2023-04-23

要求使用CSS样式来实现..

参考技术A

直接在需要用省略号的元素加多一个属性

white-space: nowrap;

参考技术B 参考这个里面的介绍

http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/06/1793922.html

需要添加的是title 值：
<a href="#" title="字段内容" >字段内容</a>本回答被提问者采纳

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