前端实战——完美解决文本框超出内容用“……”表示，鼠标滑过时显示隐藏内容

原创

于 2016-02-12 23:55:14 发布 · 1.3w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #tooltip

在前端开发中，为了解决内容过多导致显示不全的问题，可以实现当内容超出文本框时以省略号代替，并在鼠标悬停时通过tooltip展示全部内容。此解决方案利用JavaScript和CSS，配合JQuery插件qtip，实现了页面元素自适应调整和鼠标交互的友好体验。文章提供了核心代码和demo下载链接，有助于开发者快速应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前台的开发过程中我们通常会遇到这样的问题。内容太多，显示不全，若要全部显示出来的话，又觉得太挤得慌。怎么办？
如下图所示（让用户看了就会感觉很不爽！）
这里写图片描述
那么这个时候需求就有了：
1、要求在你内容在超出文本框的时候，需要用省略替代。
2、还能够使得页面的元素自动适应页面的大小进行变化调整。
（再来一个高级一点的需求。）
3、在你的鼠标滑过的时候，将内容放到一个tooltip中显示出来，鼠标离开文本框提示框就自动消失掉。
要求的效果如下：
这里写图片描述
这样的需求，怎么来解决呢？
core code：

JavaScript部分

 <script type = "text/javascript">

   var tdContent = $('#test').text() ;
   $('.test').qtip({
        content: tdContent,
        show: {

最低0.47元/天解锁文章

200万优质内容无限畅学