在html中显示长度较大的数据处理方法

在html中显示长度较大的数据处理方法,第1张

在html中显示长度较大数据处理方法

在html中显示长度较大的数据时,可以将数据截取显示,当鼠标滑过时再显示完整数据。

例如,下面这种情况。

实现:

<a title="${siteBoardInfoList.boardUrl}">

<c:if test="${fn:length(siteBoardInfoList.boardUrl) >= 40}">

${fn:substring(siteBoardInfoList.boardUrl,0,20)}......${fn:substring(siteBoardInfoList.boardUrl,fn:length(siteBoardInfoList.boardUrl)-21,fn:length(siteBoardInfoList.boardUrl))}

</c:if>

<c:if test="${fn:length(siteBoardInfoList.boardUrl) <40}">

${siteBoardInfoList.boardUrl}

</c:if>

</a></p

1.给那个td加 text-overflow:ellipsis,和 white-space:nowrap 使td的内容不换行,超长出省略号。

2.鼠标hover上去显示全 最简单的方法给那个td一个title属性,属性值是全部内容 hover上去自动就有了,但不是图上的那种样子,不会有粗细,颜色之分,就是系统默认的。

3.如果想要图片上的那种效果 需要用js实现。写个隐藏div把那个td的内容放进去,然后onmouseover事件。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7236978.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存