文字过长设置隐藏,鼠标hover时显示在title上

         <td>
             <span class="text-content">
                 1.工作内容工作内容工作内容工作内容工作内容工作内容工作内容
                 2.工作内容工作内容工作内容工作内容工作内容工作内容工作内容
              </span>
          </td>

css:
/*表格超出隐藏*/
.ellipsis-table{table-layout:fixed;}
.ellipsis-table td{width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
js:
//内容赋值title
$(‘.text-content‘).hover(function () {
    var value = $(this).text();
    $(this).attr(‘title‘,value);
});

原文地址:https://www.cnblogs.com/mahmud/p/11846987.html

时间: 2024-10-07 16:53:47

文字过长设置隐藏,鼠标hover时显示在title上的相关文章

CSS鼠标经过时显示

CSS鼠标经过时显示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS Tooltips(鼠标经过时显示)</title> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*这

css实现table中td单元格鼠标悬浮时显示更多内容

table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span class="tdtip">popAddress</span></td> css: td{ position:relative; z-index:2; } td:hover{ z-index:3; background:none; } td .tdtip { di

CSS实现DIV感应鼠标Hover时的显示隐藏效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现DIV感应鼠标Hover时的显示隐藏效果</title> <style> .wrap{} .wrap .box{border:2px solid red;width:200px;height:200px;float:left;margi

鼠标悬停时显示图片边框和文字描述的图片特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

文字太长想隐藏的字用省略号来代替

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 是必须的,因为宽度需要固定它才知道那些文字是超出了范围 你会觉得这样的话那怎么看全部的文字呢?你可以在元素上设置title属性,让title来显示整个文字, 但是我感觉有一个问题就是title反应好慢 感觉用户体验不好

Android 文字过长TextView如何自动截断并显示成省略号

当用TextView来显示标题的时候,如果标题内容过长的话,我们不希望其换行显示,这时候我们需要其自动截断,超过的部分显示成省略号. 如下图所示,标题过长,自动换行了,显示不是很好看. 这时候我们需要其自动截断,超过的部分显示成省略号. xml布局里需要将textview的下面属性设置下: android:ellipsize="end" android:singleLine="true" 其中:android:ellipsize="start"-

echartsx轴名称过长,截断+鼠标划过显示全称

xAxis : [ { triggerEvent:true,//这句很重要,没有不会触发事件 -- } ], -- videoChart.setOption(option); extension(videoChart); function extension(mychart) { //判断是否创建过div框,如果创建过就不再创建了                        var id = document.getElementById("extension"); if(!id)

Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据

在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts()调用的函数的最底部即可 1 var ecConfig = require('echarts/config'); 2 myChart.on(ecConfig.EVENT.HOVER

简单的圆形图标鼠标hover效果 | CSS3教程

演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animations来制作.图标的创建将使用IcoMoon app来完成. 注意:不是每一个浏览器都支持伪元素,最好是使用Chrome或Firefox浏览器观看. HTML结构: 图标组的结构是使用一个div包含一组a元素,给每个a元素设置图标class. <div class="hi-icon-wrap hi