把单元格显示不下的文本用省略号代替，并且当mouseover时用提示信息显示全部内容

最新推荐文章于 2023-09-22 01:46:34 发布
最新推荐文章于 2023-09-22 01:46:34 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： Script 文章标签： generator html javascript border function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jam_li/article/details/1176004
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<table border="1" style="table-layout:fixed">
<tr>
<td style="width:150px;overflow:hidden;text-overflow:ellipsis;"><div style="white-space:nowrap;" title="" οnmοuseοver="changeTitle(this)">这一行超出了范围这一行超出了范围这一行超出了范围这一行超出了范围<div></td>
</tr>
<tr>
<td style="width:150px;overflow:hidden;text-overflow:ellipsis;"><div style="white-space:nowrap;" title="" οnmοuseοver="changeTitle(this)">这一行没超范围<div></td>
</tr>
<tr>
<td style="width:150px;overflow:hidden;text-overflow:ellipsis;"><div style="white-space:nowrap;" title="" οnmοuseοver="changeTitle(this)">这一行又超出了范围这一行又超出了范围<div></td>
</tr>
</table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeTitle(obj){
 if(obj.offsetWidth>obj.parentElement.offsetWidth){
  obj.title=obj.innerText;
 }else{
  obj.title="";
 }
}
//-->
</SCRIPT> 

jam_li
关注
专栏目录
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 3948
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
JavaScript教程（一）
m0_56752010的博客
04-21 2486
听课笔记
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
01-21
题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容！ html代码如下： <div xss=removed> 用CSS实现超长字段被省略的简单方法 </div> 注意：设置宽度，overflow:hidden, white-space:nowrap, te
网页中使过长的一行文字只显示一部分。后面有…代替
pengyigui的专栏
05-19 951
 网页中使过长的一行文字只显示一部分。后面有…代替 就是比如有一行文字，很长，表格内一行显示不下. 4.范围GB18030>GBK>GB2312 5 
设置单元表格将显示不下的文本用省略号代替
edilon_的专栏
01-10 1244
内容
Jquery实现Mouseover显示跟随的提示信息效果
weixin_34303897的博客
03-25 238
javascript代码： var mouseon=false; // $('a')是要有mouseover出息提示信息的对象; $('a').mouseover(function(e) { //取得该对象的title属性作为提示信息显示，当然你也可以指定其他属性; var tip = $(this).attr('title'); ...
JavaScript实战操作（DOM，BOM）
qq_43542290的博客
11-19 556
JS语法页面文档对象模型浏览器对象模型JSECMAScriptDOMBOM API 应用程序编程接口，就是一个工具，以便于能轻松实现想要完成的功能 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM） DOM 可以改变网页的内容、结构和样式 DOM树 文档：一个页面就是一个文档 document 元素：页面中的所有标签都是元素，element 节点...
前端学习.
qq_53323012的博客
11-15 922
基础班学习路线 html5基础，css3基础，h5c3提高，练习项目。 网页简介 1.html html指的是超文本标记语言，它是用来描述网页的一种语言。 html不是一种编辑语言，而是一种标记语言。 标记语言是一套标记标签。 所谓超文本，有层含义： 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超越链接文本） 2.网页 1.网站是指因特网上根据一定的规则，使用html等制作的用于展示特定内容相关的网页集合。 2.网页是网
2、JavaWeb的笔记（1版本）
最新发布
qq_42313687的博客
09-22 238
JavaWeb
td单元格内容缩略显示问题
04-23
td单元格内容过多时缩略为。显示问题
表格内容 超过长度用省略号代替
03-23
解决表格内容长度超过限制 表格内容 超过长度用省略号代替
【DataV/echarts】vue中使用，修改地图和鼠标点击部分的背景色
花间半盘棋
09-08 1350
series：使用 DataV 引入地图，主要介绍修改地图相关的样式，选中你需要的地图区域，点复制，然后再在组件中
vue echarts 离线datav地图使用
u012914342的博客
06-29 2804
DATAV.GeoAtlas：http://datav.aliyun.com/tools/atlas/index.html 下载完成后引入： import guizhou from '../../public/mapJson/贵州省.json' 初始化组件： const that = this setTimeout(() => { var echarts = require('echarts') that.graph = echarts.init(d
扩展:datagrid mouseover事件
iteye_5810的博客
10-16 243
[code="java"] /** * 扩展两个方法 */ $.extend($.fn.datagrid.methods, { /** * 开打提示功能 * @param {} jq * @param {} params 提示消息框的样式 ...
datav 轮播表
狗狗狗亮的博客
12-11 8587
<template> <div> <dv-scroll-board :config="config" style="margin-left:1rem;width:95%;height:48rem" /> </div> </template> <script> export default { props:['AreaData'], data(){ return { config:{ .
DATAV可视化基本操作
热门推荐
小蚯蚓的博客
12-23 2万+
一、实现功能 使用阿里云DATAV实现炫酷的数据展示，通过创建静态或者动态数据，使用DATAV提供的模板，实现数据炫酷精确的展示。 二、实现步骤 1.购买阿里云DAVAV服务，自己使用购买51rmb/年足够。 2.创建mysql数据源（首先mysql要有对应数据） （1）进入阿里云的DATAV界面 https://datav.aliyun.com/data （2）添加数据源 ...
DataV可视化大屏-基本操作说明
qq_42061692的博客
01-01 9632
DataV可视化大屏-基本操作说明1.登陆2.账户类型3.创建大屏4.修改大屏4.1增减模块4.2修改数据5.交付：发布和拷贝6.工单系统 1.登陆 这里是DataV登陆地址，注意仅支持chrome浏览器版本56以上，且对显卡要求较高。 2.账户类型 基础版——企业版——开发者版，组件和服务依次升级 一期项目开发使用企业版，现已到期，待二期项目开始后续费企业版账号。 3.创建大屏 在登陆后界面“新...
js 文字超出部分用省略号替代 鼠标悬停时显示全部内容
08-31
JS文本超出部分用省略号替代的需求经常在网页设计中出现。这样做可以有效地减少页面上冗长的文本显示，并给用户一个快速浏览的体验。一种常见的解决方案是使用CSS的文本溢出属性，结合JavaScript的悬停事件来实现。 首先，在CSS中定义文本溢出样式。使用`text-overflow:ellipsis;`属性可以让超出部分的文本显示省略号，同时，设置`white-space: nowrap;`属性可以防止文本换行。 接下来，在HTML中声明需要添加省略号的文本元素，并添加一个自定义的class名称，例如`ellipsis-text`。 然后，在JavaScript中编写相关的处理逻辑。首先，获取所有带有class名称为`ellipsis-text`的元素。然后，对每个元素绑定悬停事件，当鼠标悬停在文本上时，将元素的`title`属性设置为元素的全部文本内容，以显示完整的文本。当鼠标离开时，将`title`属性重置为空，以显示省略号。 下面是一个简单的实现示例： HTML部分： ```html <div class="ellipsis-text">这是一个超出部分用省略号替代的示例文本。</div> ``` CSS部分： ```css .ellipsis-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` JavaScript部分： ```javascript var elements = document.getElementsByClassName('ellipsis-text'); Array.prototype.forEach.call(elements, function(element) { element.addEventListener('mouseover', function() { element.title = element.innerText; }); element.addEventListener('mouseout', function() { element.title = ''; }); }); ``` 通过以上步骤，当鼠标悬停在文本上时，会显示全部的文本内容；鼠标离开时，文本又会被替换为省略号，从而实现了需求的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值