html中使用js实现内容过长时部分-白红宇

html中使用js实现内容过长时部分

阅读量：4984 次

发布时间：2019-06-12

本文共 904 字，大约阅读时间需要 3 分钟。

有时数据内容太长时我们并不希望其全部显示出来，因为这样可能会导致用于显示这些内容的标签被撑开影响美观。

这时就希望能够实现默认只显示部分内容，在鼠标放上去的时候再将全部的内容显示出来。

这里提供一个简单的实现方法，通过将全部内容放在单独一个标签中，通过控制这个标签的显示与隐藏实现此效果。

html页面中创建一个table，用于存放默认的数据，在需要显示更多数据的td中新建一个div用于显示所有数据（可以放在任何期望的位置）。

这里通过样式控制此div的显示与隐藏。

    
            过长内容隐藏        
        
                                          用户名                    简介               
                                 userName                                鼠标置于此查看详情            
            
                             这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。

如果需要js控制显示与隐藏，可以使用onmouseover和onmouseout这两个事件。

给td中添加这两个事件，

            鼠标置于此查看详情            
        
                         这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。

然后在js部分写上需要控制的div的样式。

这样就可以实现简单的隐藏与显示了。

posted on

2016-08-25 16:22 阅读(

...) 评论(

...)

转载于:https://www.cnblogs.com/Faquir/p/5807322.html

你可能感兴趣的文章

用户名	简介
userName	鼠标置于此查看详情这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。